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
原文地址:https://www.cnblogs.com/maoduoduo/p/3159922.html