完美运动框架

完美运动框架:可以同时运动,以往的运动框架都是一个运动完另一个再运动,完美运动框架是支持多个运动同时进行,把之前的对象属性值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>

 

posted @ 2013-03-20 18:03  yexingwen  阅读(329)  评论(0编辑  收藏  举报