旋转动画

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10             border: none;
 11             list-style: none;
 12         }
 13 
 14         img {
 15             vertical-align: top;
 16         }
 17 
 18         body {
 19             background-color: #000;
 20         }
 21 
 22         #slider {
 23              1200px;
 24             height: 460px;
 25             margin: 100px auto;
 26             position: relative;
 27             /*background-color: red;*/
 28         }
 29 
 30         #slider li {
 31             position: absolute;
 32             left: 200px;
 33             top: 0;
 34         }
 35 
 36         #slider li img {
 37              100%;
 38             height: 100%;
 39         }
 40 
 41         .slider_ctl_prev, .slider_ctl_next {
 42              76px;
 43             height: 112px;
 44             position: absolute;
 45             top: 50%;
 46             margin-top: -56px;
 47             z-index: 99;
 48         }
 49 
 50         #slider_ctl {
 51             opacity: 0;
 52         }
 53 
 54         .slider_ctl_prev {
 55             background: url("images/prev.png") no-repeat;
 56             left: 0;
 57         }
 58 
 59         .slider_ctl_next {
 60             background: url("images/next.png") no-repeat;
 61             right: 0;
 62         }
 63     </style>
 64 </head>
 65 <body>
 66 <div id="slider">
 67     <ul id="slider_main">
 68         <li><img src="images/slidepic1.jpg" alt=""></li>
 69         <li><img src="images/slidepic2.jpg" alt=""></li>
 70         <li><img src="images/slidepic3.jpg" alt=""></li>
 71         <li><img src="images/slidepic4.jpg" alt=""></li>
 72         <li><img src="images/slidepic5.jpg" alt=""></li>
 73     </ul>
 74     <div id="slider_ctl">
 75         <span class="slider_ctl_prev"></span>
 76         <span class="slider_ctl_next"></span>
 77     </div>
 78 </div>
 79 <script src="js/MyTool.js"></script>
 80 <script>
 81     window.addEventListener('load', function (ev) {
 82          // 1. 获取需要的标签
 83          var slider = myTool.$('slider');
 84          var sliderMain = myTool.$('slider_main');
 85          var allLis = sliderMain.children;
 86          var sliderCtl = myTool.$('slider_ctl');
 87 
 88          // 2. 位置信息
 89         var jsonArr = [
 90             {400, top:20, left:50, opacity:0.2, zIndex:2},
 91             {600, top:70, left:0, opacity:0.8, zIndex:3},
 92             {800, top:100, left:200, opacity:1, zIndex:4},
 93             {600, top:70, left:600, opacity:0.8, zIndex:3},
 94             {400, top:20, left:750, opacity:0.2, zIndex:2}
 95         ];
 96 
 97         for (var i = 0; i < jsonArr.length; i++) {
 98             myTool.buffer(allLis[i], jsonArr[i]);
 99         }
100 
101         // 3. 显示和隐藏
102         slider.addEventListener('mouseover', function () {
103             myTool.buffer(sliderCtl, {'opacity': 1});
104         });
105 
106         slider.addEventListener('mouseout', function () {
107             myTool.buffer(sliderCtl, {'opacity': 0});
108         });
109 
110         // 4. 监听点击
111         for (var j = 0; j < sliderCtl.children.length; j++) {
112             var item = sliderCtl.children[j];
113             item.addEventListener('click', function () {
114                 if(this.className === 'slider_ctl_prev'){ // 左边
115                     jsonArr.push(jsonArr.shift());
116                 }else {
117                     jsonArr.unshift(jsonArr.pop());
118                 }
119 
120                 // 重新布局
121                 for (var i = 0; i < jsonArr.length; i++) {
122                     myTool.buffer(allLis[i], jsonArr[i]);
123                 }
124             })
125         }
126     })
127 </script>
128 </body>
129 </html>

jsonArr.shift()获取第一个json里的内容

jsonArr.pop()获取最后一个json里的内容

  1 (function (w) {
  2     w.myTool = {
  3         $: function (id) {
  4             return typeof id === 'string' ? document.getElementById(id) : null;
  5         },
  6         hasClassName: function (obj, cs) {
  7             var reg = new RegExp('\b' + cs + '\b');
  8             return reg.test(obj.className);
  9         },
 10         addClassName: function (obj, cs) {
 11             if (!this.hasClassName(obj, cs)) {
 12                 obj.className += ' ' + cs;
 13             }
 14         },
 15         removeClassName: function (obj, cs) {
 16             var reg = new RegExp('\b' + cs + '\b');
 17             // 删除class
 18             obj.className = obj.className.replace(reg, '');
 19         },
 20         toggleClassName: function (obj, cs) {
 21             if (this.hasClassName(obj, cs)) {
 22                 // 有， 删除
 23                 this.removeClassName(obj, cs);
 24             } else {
 25                 // 没有，则添加
 26                 this.addClassName(obj, cs);
 27             }
 28         },
 29         scroll: function () {
 30             if (window.pageYOffset !== null) { // 最新的浏览器
 31                 return {
 32                     "top": window.pageYOffset,
 33                     "left": window.pageXOffset
 34                 }
 35             } else if (document.compatMode === 'CSS1Compat') { // W3C
 36                 return {
 37                     "top": document.documentElement.scrollTop,
 38                     "left": document.documentElement.scrollLeft
 39                 }
 40             }
 41             return {
 42                 "top": document.body.scrollTop,
 43                 "left": document.body.scrollLeft
 44             }
 45         },
 46         client: function () {
 47             if (window.innerWidth) { // ie9+ 最新的浏览器
 48                 return {
 49                      window.innerWidth,
 50                     height: window.innerHeight
 51                 }
 52             } else if (document.compatMode === "CSS1Compat") { // W3C
 53                 return {
 54                      document.documentElement.clientWidth,
 55                     height: document.documentElement.clientHeight
 56                 }
 57             }
 58             return {
 59                  document.body.clientWidth,
 60                 height: document.body.clientHeight
 61             }
 62         },
 63         getStyleAttr: function (obj, attr) {
 64             if (obj.currentStyle) { // IE 和 opera
 65                 return obj.currentStyle[attr];
 66             } else {
 67                 return window.getComputedStyle(obj, null)[attr];
 68             }
 69         },
 70         changeCssStyle: function (eleObj, attr, value) {
 71             eleObj.style[attr] = value;
 72         },
 73         buffer: function (eleObj, json, fn) {
 74             // 1.1 先清后设
 75             clearInterval(eleObj.timer);
 76             // 1.2 定义变量
 77             var speed = 0, begin = 0, target = 0, flag = false;
 78             // 1.3 设置定时器
 79             eleObj.timer = setInterval(function () {
 80                 // 标志 (标签的所有属性有没有执行完动画)
 81                 flag = true;
 82                 for (var key in json) {
 83                     if (json.hasOwnProperty(key)) {
 84                         // 获取要做动画属性的初始值
 85                         if (key === 'opacity') {
 86                             begin = parseInt(parseFloat(myTool.getStyleAttr(eleObj, key)) * 100);
 87                             target = parseInt(json[key] * 100);
 88                         } else if ('scrollTop' === key) { // 滚动
 89                             begin = Math.ceil(Number(eleObj.scrollTop));
 90                             target = parseInt(json[key]);
 91                         } else {
 92                             begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
 93                             target = parseInt(json[key]);
 94                         }
 95 
 96                         // 2.3 求出步长
 97                         speed = (target - begin) * 0.2;
 98                         speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
 99 
100                         // 2.4  动起来
101                         if (key === 'opacity') {
102                             eleObj.style.opacity = (begin + speed) / 100;
103                         } else if ('scrollTop' === key) { // 滚动
104                             eleObj.scrollTop = begin + speed;
105                         } else if ("zIndex" === key) {
106                             eleObj.style[key] = json[key];
107                         }else {
108                             eleObj.style[key] = begin + speed + 'px';
109                         }
110 
111                         // 2.5 判断
112                         if (begin !== target) {
113                             flag = false;
114                         }
115                     }
116                 }
117                 // 1.4 清除定时器
118                 if (flag) {
119                     clearInterval(eleObj.timer);
120                     // 开启另一组动画
121                     /* if(fn){
122                          fn();
123                      }*/
124                     fn && fn();
125                 }
126             }, 40);
127         }
128     };
129 })(window);