zoukankan      html  css  js  c++  java
  • 链式运动框架

    链式运动框架在任意运动框架的基础上加了一个形参,一共四个形参  对象,属性,运动目标值,函数 obj,attr,iTarget,fnEnd

    链式运动框架代码:

    View Code
     1 <script>
     2 function startMove(obj,attr,iTarget,fnEnd)
     3 {
     4     clearInterval(obj.timer);  //清除当前对象的定时器
     5     obj.timer=setInterval(function(){  //定义当前对象的定时器
     6         var cur=0;
     7             
     8         if(attr=='opacity'){  //如果attr属性是opacity时
     9             cur=Math.round(parseFloat(getStyle(obj,attr))*100);  //opacity要用parseFloat强制转换为浮点数才能起作用,因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug,会出现算不尽的数,所以要用Math.round()来四舍五入。
    10         }
    11         else{
    12             cur=parseInt(getStyle(obj,attr));    //把从对象获取到的属性值强制转换为整形
    13         }
    14         
    15         var speed=(iTarget-cur)/6;
    16         speed=speed>0?Math.ceil(speed):Math.floor(speed);  //用三目运算符,当速度大于0就向上取整,否则就向下取整,这样能避免缓冲运动出现bug
    17         
    18         if(cur==iTarget){
    19             clearInterval(obj.timer);
    20             if(fnEnd)fnEnd();
    21         } 
    22         else{
    23             if(attr=='opacity'){
    24                 obj.style.filter='alpha(opacity:'+(cur+speed)+')';  //IE
    25                 obj.style.opacity=(cur+speed)/100;  //FireFox Chrome
    26             }
    27             else{
    28                 obj.style[attr]=cur+speed+'px';    
    29             }
    30         }
    31     },30);
    32 };
    33 </script>
     1 <script>
     2 function startMove(obj,attr,iTarget,fnEnd)
     3 {
     4     clearInterval(obj.timer);  //清除当前对象的定时器
     5     obj.timer=setInterval(function(){  //定义当前对象的定时器
     6         var cur=0;
     7             
     8         if(attr=='opacity'){  //如果attr属性是opacity时
     9             cur=Math.round(parseFloat(getStyle(obj,attr))*100);  //opacity要用parseFloat强制转换为浮点数才能起作用,因为浮点数习惯用整数表示所以乘以100。因为有些小数*100在计算机中会出现bug,会出现算不尽的数,所以要用Math.round()来四舍五入。
    10         }
    11         else{
    12             cur=parseInt(getStyle(obj,attr));    //把从对象获取到的属性值强制转换为整形
    13         }
    14         
    15         var speed=(iTarget-cur)/6;
    16         speed=speed>0?Math.ceil(speed):Math.floor(speed);  //用三目运算符,当速度大于0就向上取整,否则就向下取整,这样能避免缓冲运动出现bug
    17         
    18         if(cur==iTarget){
    19             clearInterval(obj.timer);
    20             if(fnEnd)fnEnd();
    21         } 
    22         else{
    23             if(attr=='opacity'){
    24                 obj.style.filter='alpha(opacity:'+(cur+speed)+')';  //IE
    25                 obj.style.opacity=(cur+speed)/100;  //FireFox Chrome
    26             }
    27             else{
    28                 obj.style[attr]=cur+speed+'px';    
    29             }
    30         }
    31     },30);
    32 };
    33 </script>
  • 相关阅读:
    爬虫基础
    设计BBS
    中间件和auth模块
    git
    分页器与form表单
    cookie与session
    springboot2.x基础教程:@Enable原理
    springboot2.x基础教程:@Scheduled开启定时任务及源码分析
    springboot2.x基础教程:@Async开启异步任务
    springboot2.x基础教程:JRebel实现SpringBoot热部署
  • 原文地址:https://www.cnblogs.com/52css/p/2971180.html
Copyright © 2011-2022 走看看