这两天在慕课网学习了一门课程即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-in 34 35 //在所有属性都到达目标值后，判断是否有回调函数（链式动画） 36 if(flag){ 37 clearInterval(obj.timer); 38 if(fn){ 39 fn(); 40 }; 41 } 42 },30) 43 } 44 45 function getStyle(obj,attr){//解决加了边框之后bug 46 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 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 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,{400,height:200,opacity:100,top:20,left:20}); 51 } 52 oLi.onmouseout = function(){ 53 startMove(oLi,{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,{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,{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