JavaScript--封装好的运动函数+旋转木马例子

封装好的运动函数：

1.能控制目标元素的多种属性

2.能自动获取元素的样式表：

3.获取样式函数兼容

4.能对于元素的多属性进行动画（缓动动画）修改

5.能区分透明度等没单位的属性和px属性的变化

animate.js

 /**
  * 获取样式函数
  * @param element 要获取的样式的对象
  * return 目标css样式对象
  * */
 function getStyle(element) {
     if(window.getComputedStyle) {
         return  window.getComputedStyle(element,null);
     }else if(element.currentStyle){
         return element.currentStyle;
     }
 }

 /**
  * 动画函数
  * @param element html标签
  * @param attr 标签属性
  * @param target 目标参数
  * */
 function  animate(element,obj) {
     clearInterval(element.timer);
     element.timer = setInterval(function () {
         var flag = true;
         for(var attr in obj){
             // 在for in 的内部要区别开到底是透明度还是像素px的变化
             if( attr == "opacity") {
                 var current = getStyle(element)[attr];
                 var target = obj[attr];
                 current = current * 100;
                 target = target * 100;
                 // Math.round() 函数返回一个数字四舍五入后最接近的整数值。
                 current = Math.round(current);
                 var step = (target - current) / 10;
                 current += current <=  target ? Math.ceil(step):Math.floor(step);
                 if(current != target) {
                     flag = false;
                 }
                 // element.style.left等
                 element.style[attr] = current / 100;
             }else if(attr == "zIndex"){
                 element.style[attr] = obj[attr];
             } else{
                 var current = parseInt(getStyle(element)[attr]);
                 var target = obj[attr];
                 var step = (target - current) / 10;
                 current += current <=  target ? Math.ceil(step):Math.floor(step);
                 if(current != target) {
                     flag = false;
                 }
                 // element.style.left等
                 element.style[attr] = current+ "px";
             }
         }
         if(flag) {
             clearInterval(element.timer);
         }
     },40);
 }

animate2.js

 // 多个属性运动框架  添加回调函数
 function animate(obj,json,fn) {  // 给谁    json
     clearInterval(obj.timer);
     obj.timer = setInterval(function() {
         var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
         for(var attr in json){   // attr  属性     json[attr]  值
             //开始遍历 json
             // 计算步长    用 target 位置 减去当前的位置  除以 10
             // console.log(attr);
             var current = 0;
             if(attr == "opacity")
             {
                 current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                 console.log(current);
             }
             else
             {
                 current = parseInt(getStyle(obj,attr)); // 数值
             }
             // console.log(current);
             // 目标位置就是  属性值
             var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
             step = step > 0 ? Math.ceil(step) : Math.floor(step);
             //判断透明度
             if(attr == "opacity")  // 判断用户有没有输入 opacity
             {
                 if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                 {
                     // obj.style.opacity
                     obj.style.opacity = (current + step) /100;
                 }
                 else
                 {  // obj.style.filter = alpha(opacity = 30)
                     obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                 }
             }
             else if(attr == "zIndex")
             {
                 obj.style.zIndex = json[attr];
             }
             else
             {
                 obj.style[attr] = current  + step + "px" ;
             }

             if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
             {
                 flag =  false;
             }
         }
         if(flag)  // 用于判断定时器的条件
         {
             clearInterval(obj.timer);
             //alert("ok了");
             if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
             {
                 fn(); // 函数名 +  （）  调用函数  执行函数
             }
         }
     },30)
 }
 function getStyle(obj,attr) {  //  谁的      那个属性
     if(obj.currentStyle)  // ie 等
     {
         return obj.currentStyle[attr];  // 返回传递过来的某个属性
     }
     else
     {
         return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
     }
 }

旋转木马例子

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>旋转木马轮播图</title>
     <style>
         /*初始化  reset*/
         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}
         body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
         ol,ul{list-style:none}
         a{text-decoration:none}
         fieldset,img{border:0;vertical-align:top;}
         a,input,button,select,textarea{outline:none;}
         a,button{cursor:pointer;}

         .wrap{
             width:1200px;
             margin:100px auto;
         }
         .slide {
             height:500px;
             position: relative;
         }
         .slide li{
             position: absolute;
             left:200px;
             top:0;
         }
         .slide li img{
             width:100%;
         }
         .arrow{
             /*opacity: 0;*/
         }
         .prev,.next{
             width:76px;
             height:112px;
             position: absolute;
             top:50%;
             margin-top:-56px;
             background: url(images/prev.png) no-repeat;
             z-index: 99;
         }
         .next{
             right:0;
             background-image: url(images/next.png);
         }
     </style>
 </head>

 <body>
 <div class="wrap" id="wrap">
     <div class="slide" id="slide">
         <ul>
             <li>
                 <a href="#"><img src="data:images/slidepic1.jpg" alt="" /></a>
             </li>
             <li>
                 <a href="#"><img src="data:images/slidepic2.jpg" alt="" /></a>
             </li>
             <li>
                 <a href="#"><img src="data:images/slidepic3.jpg" alt="" /></a>
             </li>
             <li>
                 <a href="#"><img src="data:images/slidepic4.jpg" alt="" /></a>
             </li>
             <li>
                 <a href="#"><img src="data:images/slidepic5.jpg" alt="" /></a>
             </li>
         </ul>
         <div class="arrow" id="arrow">
             <a href="javascript:;" class="prev" id="arrLeft"></a>
             <a href="javascript:;" class="next" id="arrRight"></a>
         </div>
     </div>
 </div>
 <!--把动画函数封装好，再通过script标签的属性引入到当前文件-->
 <script src="animate.js"></script>
 <script>
     /**
      *   第一个功能：
      *      让图片都散开，到达每一张图片应该到达的位置
      *      根据config数组，设置每一张图片的位置即可
      *
      *   第二个功能
      *      旋转
      *      点击左右按钮
      */
     var config = [
         {
             width: 400,
             top: 20,
             left: 50,
             opacity: 0.2,
             zIndex: 2
         }, //
         {
             width: 600,
             top: 70,
             left: 0,
             opacity: 0.8,
             zIndex: 3
         }, //
         {
             width: 800,
             top: 100,
             left: 200,
             opacity: 1,
             zIndex: 4
         }, //
         {
             width: 600,
             top: 70,
             left: 600,
             opacity: 0.8,
             zIndex: 3
         }, //
         {
             width: 400,
             top: 20,
             left: 750,
             opacity: 0.2,
             zIndex: 2
         } //
     ];

     var slide = document.getElementById('slide');
     var slideItem = slide.children[0].children;
     var arrLeft = document.getElementById("arrLeft");
     var arrRight = document.getElementById("arrRight");
     // 页面加载完毕后，运行散开动画
     for(var i = 0 ; i < slideItem.length; i++ ) {
         animate(slideItem[i],config[i]);

     }
     // 给右按钮添加点击事件

     arrRight.onclick = function () {
         //splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
         // config.splice(0,1)[0] 截取数组的第一个元素
         // 再把截取的元素放到改变之后的数组的最后位置
         config.splice(config.length,0,config.splice(0,1)[0]);
         for(var i = 0 ; i < slideItem.length; i++ ) {
             animate(slideItem[i],config[i]);
         }
     }
     arrLeft.onclick = function () {
         config.splice(0,0,config.splice(config.length-1,1)[0]);
         for(var i = 0 ; i < slideItem.length; i++ ) {
             animate(slideItem[i],config[i]);
         }
     }

 </script>
 </body>

 </html>