zoukankan      html  css  js  c++  java
  • 完美运动框架

    完美运动框架:可以同时运动,以往的运动框架都是一个运动完另一个再运动,完美运动框架是支持多个运动同时进行,把之前的对象属性值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>
  • 相关阅读:
    weak引用变量是否线程安全
    VMware vSphere HyperVisor安装过程记录
    【转载】VMWare ESXi 5.0和vSphere Client安装和配置
    Wmware桥接网络虚拟机无法上网的问题
    虚拟机移动后重启网络时提示Device does not seem to be present
    Eclipse maven工程 Missing artifact com.sun:tools:jar:1.5.0:system 解决方法
    【转】使用JIRA搭建企业问题跟踪系统【个人推荐】
    使用XAMPP本地安装Wordpress博客
    【转载】维度表和事实表的区别
    maven工程的如何进行代码调试
  • 原文地址:https://www.cnblogs.com/52css/p/2971650.html
Copyright © 2011-2022 走看看