• 15,完美运动框架;


    由任意值运动框架——>链式运动框架(start(obj,attr,iTarget,fnEnd),多添加了一个函数,用来在对象运动完成后执行该函数,达到分层次运动的效果;)——>完美运动框架;

    完美运动框架与之前运动框架的区别与完善:

    1,运用了json,即json{attr:iTarget},用for in遍历json,使对象的每一个属性能够同步运动。

    2,用var bStop=true;来判断对象的每一个属性是否都达到了目标点,如果有一个不达到,则bStop=false;当全部达到时,关闭定时器;

    var bStop=true;

    for(```in json){

      timer=setInterval(function(){

        ```````运动函数主体;

        if(iCur != json[attr]){

          bStop=false;

        }

      },30)

    }

    if(bStop){

      clearInterval(timer);

      if(fnEnd){

        fnEnd();//如果函数存在,则执行该函数;

      }

    }

    完美运动框架js:

    function getStyle(obj, name)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[name];
        }
        else
        {
            return getComputedStyle(obj, false)[name];
        }
    }
    
    
    //startMove(oDiv, { 400, height: 400})
    
    
    function startMove(obj, json, fnEnd)
    {
        clearInterval(obj.timer);
        obj.timer=setInterval(function (){
            var bStop=true;        //假设:所有值都已经到了
            
            for(var attr in json)
            {
                var cur=0;
                
                if(attr=='opacity')
                {
                    cur=Math.round(parseFloat(getStyle(obj, attr))*100);
                }
                else
                {
                    cur=parseInt(getStyle(obj, attr));
                }
                
                var speed=(json[attr]-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                if(cur!=json[attr])
                    bStop=false;
                
                if(attr=='opacity')
                {
                    obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                    obj.style.opacity=(cur+speed)/100;
                }
                else
                {
                    obj.style[attr]=cur+speed+'px';
                }
            }
            
            if(bStop)
            {
                clearInterval(obj.timer);
                            
                if(fnEnd)fnEnd();
            }
        }, 30);
    }
    View Code
  • 相关阅读:
    jquery和js常用的遍历数组的方法
    jquery获取某组件距离边框的距离
    jquery获取鼠标移动时的位置
    springboot整合websocket实现登录挤退现象
    使用Gitblit搭建Git服务器教程
    Gradle史上最详细解析
    推荐5个提高Java开发效率的工具
    JBoss7详细配置指南
    XMLBEANS的使用总结
    使用XMLBeans 处理XML
  • 原文地址:https://www.cnblogs.com/maoduoduo/p/3159922.html
Copyright © 2020-2023  润新知