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>
  • 相关阅读:
    MySql常用日期时间查询
    微信开发中网页授权access_token与基础支持的access_token异同
    Sqlserver复杂查询
    Array排序和List排序
    关于java按位操作运算
    验证redis的快照和AOF
    线程安全 加锁机制
    Redis 与 数据库处理数据的两种模式
    redis实现点击量/浏览量
    jsp网站访问次数统计的几种方法
  • 原文地址:https://www.cnblogs.com/52css/p/2971650.html
Copyright © 2011-2022 走看看