完美运动框架
完美运动框架：可以同时运动，以往的运动框架都是一个运动完另一个再运动，完美运动框架是支持多个运动同时进行，把之前的对象属性值attr和目标值iTarget用json替换。
点击打开代码
1 <script> 2 function startMove(obj,json,fnEnd) 3 { 4 clearInterval(obj.timer); //清除当前对象的定时器 5 obj.timer=setInterval(function() //定义当前对象的定时器 6 { 7 var bStop=true; //假设：所有值都已经到了 8 9 for(var attr in json) 10 { 11 var cur=0; 12 13 if(attr=='opacity') 14 { //如果attr属性是opacity时 15 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入来获取当前值。 16 } 17 else 18 { 19 cur=parseInt(getStyle(obj,attr)); //把从对象获取到的属性当前值强制转换为整形 20 } 21 22 var speed=(json[attr]-cur)/6; 23 speed=speed>0?Math.ceil(speed):Math.floor(speed); //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug 24 25 if(cur!=json[attr]) //如果有当前的值不等于目标点 26 bStop=false; //不是所有的值都到了目标值 27 28 if(attr=='opacity') 29 { 30 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE 31 obj.style.opacity=(cur+speed)/100; //Chrome FireFox 32 } 33 else 34 { 35 obj.style[attr]=cur+speed+'px'; 36 } 37 }; 38 39 if(bStop) //如果所有目标值都到了目标值 40 { 41 clearInterval(obj.timer); //就清除当前定时器 42 43 if(fnEnd)fnEnd(); //如果有回调函数传进来就执行函数 44 } 45 },30); 46 }; 47 </script>
1 <script> 2 function startMove(obj,json,fnEnd) 3 { 4 clearInterval(obj.timer); //清除当前对象的定时器 5 obj.timer=setInterval(function() //定义当前对象的定时器 6 { 7 var bStop=true; //假设：所有值都已经到了 8 9 for(var attr in json) 10 { 11 var cur=0; 12 13 if(attr=='opacity') 14 { //如果attr属性是opacity时 15 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要用parseFloat强制转换为浮点数才能起作用，因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug，会出现算不尽的数，所以要用Math.round()来四舍五入来获取当前值。 16 } 17 else 18 { 19 cur=parseInt(getStyle(obj,attr)); //把从对象获取到的属性当前值强制转换为整形 20 } 21 22 var speed=(json[attr]-cur)/6; 23 speed=speed>0?Math.ceil(speed):Math.floor(speed); //用三目运算符，当速度大于0就向上取整，否则就向下取整，这样能避免缓冲运动出现bug 24 25 if(cur!=json[attr]) //如果有当前的值不等于目标点 26 bStop=false; //不是所有的值都到了目标值 27 28 if(attr=='opacity') 29 { 30 obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE 31 obj.style.opacity=(cur+speed)/100; //Chrome FireFox 32 } 33 else 34 { 35 obj.style[attr]=cur+speed+'px'; 36 } 37 }; 38 39 if(bStop) //如果所有目标值都到了目标值 40 { 41 clearInterval(obj.timer); //就清除当前定时器 42 43 if(fnEnd)fnEnd(); //如果有回调函数传进来就执行函数 44 } 45 },30); 46 }; 47 </script>
