这两天在慕课网学习了一门课程即Js动画效果，循序渐进的做一个运动框架。可以实现多物体的同时运动，链式运动。

运动框架  move.js

复制代码

 1         //startMove(obj,{attr1:itarget1,attr2:itarget2},fn) 2         function startMove(obj,json,fn){ 3              4             clearInterval(obj.timer) 5             obj.timer = setInterval(function(){ 6                 var flag = true;//假设所有都到达目标值 7                 for(var attr in json){ 8  9                 //取当前值10                 var icur = 0;11                 if(attr == 'opacity'){12                     icur = Math.round(parseFloat(getStyle(obj,attr)) * 100 );13                 }14                 else{15                      icur = parseInt(getStyle(obj,attr));16                 }17 18                 //定义速度19                 var speed = (json[attr] - icur)/8;20                 speed = speed > 0?Math.ceil(speed):Math.floor(speed);21 22                 //判断是否停止23                 if(json[attr] != icur){24                     flag = false;25                 }26                 if(attr == 'opacity'){27                     obj.style.filter = 'alpha(opacity:'+(icur + speed)+')';28                     obj.style.opacity = (icur + speed)/100;29                 }30                 else{31                     obj.style[attr] = icur + speed + 'px';32                 }33                 }//json for-in34 35                 //在所有属性都到达目标值后，判断是否有回调函数（链式动画）36                 if(flag){37                     clearInterval(obj.timer);38                     if(fn){39                         fn();40                     };41                 }42             },30)43         }44 45         function getStyle(obj,attr){//解决加了边框之后bug46             if(obj.currentStyle){47                 return obj,currentStyle[attr];48             }49             else{50                 return getComputedStyle(obj,false)[attr];51             }52         }

复制代码

引用move.js的格式

复制代码

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>jsonmove</title> 6     <style> 7         body,ul,li{ 8             margin:0; 9             padding:0;10         }11         ul #li1{12             width:200px;13             height: 100px;14             background-color: yellow;15             border: 4px solid #000;16             filter:alpha(opacity:30);17             opacity:0.3;18             position: absolute;19             top:10px;20             left:10px;21             list-style-type: none;22         }    
23         ul #li2{24             width:200px;25             height: 100px;26             background-color: yellow;27             border: 4px solid #000;28             filter:alpha(opacity:30);29             opacity:0.3;30             position: absolute;31             top:250px;32             left:10px;33             list-style-type: none;34         }35     </style>36     <script src="move.js"></script>37 </head>38 <body>39     <ul>40         <li id="li1"></li>41         <li id="li2"></li>42     </ul>43     <script>44     window.onload = function(){45         46         //同时运动47         var oLi = document.getElementById('li1');48 49         oLi.onmouseenter = function(){50             startMove(oLi,{width:400,height:200,opacity:100,top:20,left:20});51         }52         oLi.onmouseout = function(){53             startMove(oLi,{width:200,height:100,opacity:30,top:10,left:20});54         }55 56         //链式运动57         var oLi2 = document.getElementById('li2');58 59         oLi2.onmouseenter = function(){60             startMove(oLi2,{width:400},function(){61                 startMove(oLi2,{height:200},function(){62                     startMove(oLi2,{opacity:100},function(){63                         startMove(oLi2,{top:250},function(){64                             startMove(oLi2,{left:20})65                         })66                     })67                 });68             });69         }70 71         oLi2.onmouseout = function(){72             startMove(oLi2,{left:20},function(){73                 startMove(oLi2,{top:250},function(){74                     startMove(oLi2,{opacity:30},function(){75                         startMove(oLi2,{height:100},function(){76                             startMove(oLi2,{width:200})77                         })78                     })79                 });80             });81         }82     }83     </script>84 </body>85 </html>

复制代码

慕课网JS动画效果-http://www.imooc.com/learn/167

代码演示地址：http://runjs.cn/detail/2jhz4bmc