旋转动画

浅浅的花香味﹌ 2021-11-11 00:24 330阅读 0赞

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             width: 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             width: 100%;
     38             height: 100%;
     39         }
     40 
     41         .slider_ctl_prev, .slider_ctl_next {
     42             width: 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             {width:400, top:20, left:50, opacity:0.2, zIndex:2},
     91             {width:600, top:70, left:0, opacity:0.8, zIndex:3},
     92             {width:800, top:100, left:200, opacity:1, zIndex:4},
     93             {width:600, top:70, left:600, opacity:0.8, zIndex:3},
     94             {width: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                     width: window.innerWidth,
     50                     height: window.innerHeight
     51                 }
     52             } else if (document.compatMode === "CSS1Compat") { // W3C
     53                 return {
     54                     width: document.documentElement.clientWidth,
     55                     height: document.documentElement.clientHeight
     56                 }
     57             }
     58             return {
     59                 width: 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);

转载于:https://www.cnblogs.com/zhangzhengyang/p/11217497.html