旋转动画
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);
