js/css访3d上下轮播图

(附件)

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{margin:0;padding:0}
  8.             img{border:none;vertical-align:bottom}
  9.             #box{position:relative;margin:50px auto;width:800px;height:400px;
  10.             }
  11.             #box img{position:absolute;}
  12.             #box .yun1{width:320px;height:160px;top:-160px;left:0;z-index:1;opacity:0}
  13.             #box .yun2{width:320px;height:160px;top:120px;left:0px;z-index:1;opacity:0.2}
  14.             #box .yun3{width:360px;height:180px;top:110px;left:100px;z-index:2;opacity:0.6}
  15.             #box .yun4{width:400px;height:200px;z-index:3;top:100px;left:200px;opacity:1}
  16.             #box .yun5{width:360px;height:180px;top:110px;left:340px;z-index:2;opacity:0.6}
  17.             #box .yun6{width:320px;height:160px;top:120px;left:480px;z-index:1;opacity:0.2}
  18.             #box .yun7{width:320px;height:160px;top:-160px;left:480px;z-index:1;opacity:0}
  19.         </style>
  20.         <script type="text/javascript" src="js/fengzhuanghanshu.js"></script>
  21.         <script type="text/javascript" src="js/time_move.js"></script>
  22.         <script type="text/javascript" src="js/Tween.js"></script>
  23.         <script type="text/javascript">
  24.             window.onload=function(){
  25.                 var aImg=box.getElementsByTagName("img");
  26.                 var arr=['height','width','top','left','opacity','zIndex']
  27.                 var arrval=[];
  28.               for(var i=0;i<aImg.length;i++){
  29.                   var oarr={};
  30.                   for(var j=0;j<arr.length;j++){
  31.                       if(arr[j]=='opacity'){
  32.                         var iCur=Math.round(getStyle(aImg[i],'opacity')*100)
  33.                       }else{
  34.                           var iCur=parseInt(getStyle(aImg[i],arr[j]))
  35.                       }
  36.                       oarr[arr[j]]=iCur;
  37.                   }
  38.                   arrval.push(oarr)
  39.               }
  40.               console.log(arrval)
  41.               setInterval(function(){
  42.                   arrval.push(arrval.shift())
  43.                   for(var i=0;i<aImg.length;i++){
  44.                   startMove(aImg[i],arrval[i])
  45.                   }
  46.               },1000)
  47.             }
  48.         </script>
  49.     </head>
  50.     <body>
  51.         <div id="box">
  52.             <a href="javascript:;"><img class="yun1" src="img/1.jpg"  /> </a>
  53.             <a href="javascript:;"><img class="yun2" src="img/2.jpg"  /> </a>
  54.             <a href="javascript:;"><img class="yun3" src="img/3.jpg"  /> </a>
  55.             <a href="javascript:;"><img class="yun4" src="img/4.jpg"  /> </a>
  56.             <a href="javascript:;"><img class="yun5" src="img/5.jpg"  /> </a>
  57.             <a href="javascript:;"><img class="yun6" src="img/6.jpg"  /> </a>
  58.             <a href="javascript:;"><img class="yun7" src="img/7.jpg"  /> </a>
  59.         </div>
  60.     </body>
  61. </html>

js访3d上下轮播图的更多相关文章

  1. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  2. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  4. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  5. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  6. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  9. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. python 面向对象 析构方法

    实例化但从来没有调用他,就浪费了,就应该自动删除它 这个实例一直存在内存里 python有个垃圾自动回收机制 , 每段时间会自动刷新整个内存,把内存垃圾东西删除   析构函数: 在实例释放.销毁的时候 ...

  2. Kafka介绍及安装部署

    本节内容: 消息中间件 消息中间件特点 消息中间件的传递模型 Kafka介绍 安装部署Kafka集群 安装Yahoo kafka manager kafka-manager添加kafka cluste ...

  3. 【剑指offer】栈的压入、弹出序列

    一.题目: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该 ...

  4. Vue 过渡

    过渡 通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数 ...

  5. 使用SolrJ代码导入，发布搜索服务

    搭建solr服务器:http://www.cnblogs.com/liyafei/p/8005571.html 一导入要搜索的字段 1:确定发布搜索的字段,sql语句 SELECT a.id, b.  ...

  6. Oracle数据库返回字符类型-1~1的结果处理

    如果实体类中定义的字段是String类型,Oracle数据库中返回的是数字类型,那么Oracle返回0.xxx的时候会丢失前面的0. 要想不丢失0,那么数据库返回的就要是字符串类型的,所以要将返回值转 ...

  7. openstack 部署笔记--neutron控制节点

    控制节点 配置neutron用户及服务 $ . admin-openrc $ openstack user create --domain default --password-prompt neut ...

  8. mysql 用户授权命令

    mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your_root_password' WITH GRANT OP ...

  9. Winsock网络编程

    Winsock是Windows下网络编程的标准接口.使用Winsock编程的步骤一般是比较固定的. 首先要包含头文件#include <WinSock2.h>,同时要添加WS2_32.li ...

  10. .net MVC 下拉多级联动及编辑

    多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: <script src="~/Scripts/jquery-1.10.2.js">< ...