封装好的运动函数：
1.能控制目标元素的多种属性
2.能自动获取元素的样式表：
3.获取样式函数兼容
4.能对于元素的多属性进行动画（缓动动画）修改
5.能区分透明度等没单位的属性和px属性的变化
animate.js
1 /** 2 * 获取样式函数 3 * @param element 要获取的样式的对象 4 * return 目标css样式对象 5 * */ 6 function getStyle(element) { 7 if(window.getComputedStyle) { 8 return window.getComputedStyle(element,null); 9 }else if(element.currentStyle){ 10 return element.currentStyle; 11 } 12 } 13 14 /** 15 * 动画函数 16 * @param element html标签 17 * @param attr 标签属性 18 * @param target 目标参数 19 * */ 20 function animate(element,obj) { 21 clearInterval(element.timer); 22 element.timer = setInterval(function () { 23 var flag = true; 24 for(var attr in obj){ 25 // 在for in 的内部要区别开到底是透明度还是像素px的变化 26 if( attr == "opacity") { 27 var current = getStyle(element)[attr]; 28 var target = obj[attr]; 29 current = current * 100; 30 target = target * 100; 31 // Math.round() 函数返回一个数字四舍五入后最接近的整数值。 32 current = Math.round(current); 33 var step = (target - current) / 10; 34 current += current <= target ? Math.ceil(step):Math.floor(step); 35 if(current != target) { 36 flag = false; 37 } 38 // element.style.left等 39 element.style[attr] = current / 100; 40 }else if(attr == "zIndex"){ 41 element.style[attr] = obj[attr]; 42 } else{ 43 var current = parseInt(getStyle(element)[attr]); 44 var target = obj[attr]; 45 var step = (target - current) / 10; 46 current += current <= target ? Math.ceil(step):Math.floor(step); 47 if(current != target) { 48 flag = false; 49 } 50 // element.style.left等 51 element.style[attr] = current+ "px"; 52 } 53 } 54 if(flag) { 55 clearInterval(element.timer); 56 } 57 },40); 58 }
animate2.js
1 // 多个属性运动框架 添加回调函数 2 function animate(obj,json,fn) { // 给谁 json 3 clearInterval(obj.timer); 4 obj.timer = setInterval(function() { 5 var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 6 for(var attr in json){ // attr 属性 json[attr] 值 7 //开始遍历 json 8 // 计算步长 用 target 位置 减去当前的位置 除以 10 9 // console.log(attr); 10 var current = 0; 11 if(attr == "opacity") 12 { 13 current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; 14 console.log(current); 15 } 16 else 17 { 18 current = parseInt(getStyle(obj,attr)); // 数值 19 } 20 // console.log(current); 21 // 目标位置就是 属性值 22 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 23 step = step > 0 ? Math.ceil(step) : Math.floor(step); 24 //判断透明度 25 if(attr == "opacity") // 判断用户有没有输入 opacity 26 { 27 if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity 28 { 29 // obj.style.opacity 30 obj.style.opacity = (current + step) /100; 31 } 32 else 33 { // obj.style.filter = alpha(opacity = 30) 34 obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; 35 36 } 37 } 38 else if(attr == "zIndex") 39 { 40 obj.style.zIndex = json[attr]; 41 } 42 else 43 { 44 obj.style[attr] = current + step + "px" ; 45 } 46 47 if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 48 { 49 flag = false; 50 } 51 } 52 if(flag) // 用于判断定时器的条件 53 { 54 clearInterval(obj.timer); 55 //alert("ok了"); 56 if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调 57 { 58 fn(); // 函数名 + （） 调用函数 执行函数 59 } 60 } 61 },30) 62 } 63 function getStyle(obj,attr) { // 谁的 那个属性 64 if(obj.currentStyle) // ie 等 65 { 66 return obj.currentStyle[attr]; // 返回传递过来的某个属性 67 } 68 else 69 { 70 return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 71 } 72 }
旋转木马例子
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>旋转木马轮播图</title> 6 <style> 7 /*初始化 reset*/ 8 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} 9 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} 10 ol,ul{list-style:none} 11 a{text-decoration:none} 12 fieldset,img{border:0;vertical-align:top;} 13 a,input,button,select,textarea{outline:none;} 14 a,button{cursor:pointer;} 15 16 .wrap{ 17 1200px; 18 margin:100px auto; 19 } 20 .slide { 21 height:500px; 22 position: relative; 23 } 24 .slide li{ 25 position: absolute; 26 left:200px; 27 top:0; 28 } 29 .slide li img{ 30 100%; 31 } 32 .arrow{ 33 /*opacity: 0;*/ 34 } 35 .prev,.next{ 36 76px; 37 height:112px; 38 position: absolute; 39 top:50%; 40 margin-top:-56px; 41 background: url(images/prev.png) no-repeat; 42 z-index: 99; 43 } 44 .next{ 45 right:0; 46 background-image: url(images/next.png); 47 } 48 </style> 49 </head> 50 51 <body> 52 <div class="wrap" id="wrap"> 53 <div class="slide" id="slide"> 54 <ul> 55 <li> 56 <a href="#"><img src="images/slidepic1.jpg" alt="" /></a> 57 </li> 58 <li> 59 <a href="#"><img src="images/slidepic2.jpg" alt="" /></a> 60 </li> 61 <li> 62 <a href="#"><img src="images/slidepic3.jpg" alt="" /></a> 63 </li> 64 <li> 65 <a href="#"><img src="images/slidepic4.jpg" alt="" /></a> 66 </li> 67 <li> 68 <a href="#"><img src="images/slidepic5.jpg" alt="" /></a> 69 </li> 70 </ul> 71 <div class="arrow" id="arrow"> 72 <a href="javascript:;" class="prev" id="arrLeft"></a> 73 <a href="javascript:;" class="next" id="arrRight"></a> 74 </div> 75 </div> 76 </div> 77 <!--把动画函数封装好，再通过script标签的属性引入到当前文件--> 78 <script src="animate.js"></script> 79 <script> 80 /** 81 * 第一个功能： 82 * 让图片都散开，到达每一张图片应该到达的位置 83 * 根据config数组，设置每一张图片的位置即可 84 * 85 * 第二个功能 86 * 旋转 87 * 点击左右按钮 88 */ 89 var config = [ 90 { 91 400, 92 top: 20, 93 left: 50, 94 opacity: 0.2, 95 zIndex: 2 96 }, //0 97 { 98 600, 99 top: 70, 100 left: 0, 101 opacity: 0.8, 102 zIndex: 3 103 }, //1 104 { 105 800, 106 top: 100, 107 left: 200, 108 opacity: 1, 109 zIndex: 4 110 }, //2 111 { 112 600, 113 top: 70, 114 left: 600, 115 opacity: 0.8, 116 zIndex: 3 117 }, //3 118 { 119 400, 120 top: 20, 121 left: 750, 122 opacity: 0.2, 123 zIndex: 2 124 } //4 125 ]; 126 127 var slide = document.getElementById('slide'); 128 var slideItem = slide.children[0].children; 129 var arrLeft = document.getElementById("arrLeft"); 130 var arrRight = document.getElementById("arrRight"); 131 // 页面加载完毕后，运行散开动画 132 for(var i = 0 ; i < slideItem.length; i++ ) { 133 animate(slideItem[i],config[i]); 134 135 } 136 // 给右按钮添加点击事件 137 138 arrRight.onclick = function () { 139 //splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。 140 // config.splice(0,1)[0] 截取数组的第一个元素 141 // 再把截取的元素放到改变之后的数组的最后位置 142 config.splice(config.length,0,config.splice(0,1)[0]); 143 for(var i = 0 ; i < slideItem.length; i++ ) { 144 animate(slideItem[i],config[i]); 145 } 146 } 147 arrLeft.onclick = function () { 148 config.splice(0,0,config.splice(config.length-1,1)[0]); 149 for(var i = 0 ; i < slideItem.length; i++ ) { 150 animate(slideItem[i],config[i]); 151 } 152 } 153 154 155 </script> 156 </body> 157 158 </html>