JS链式运动框架---move.js

//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)---JSON格式
  fucntion startMove(obj,json,fn){
  //fn——回调函数 
  var falg = true;//假设所有的目标值都到达了 
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){ 
        for(var attr in json){
            //1)获取当前的值 
            var icur = 0;  
            if(attr == "opacity"){  
                //parseFloat返回小数值  
                //由于计算机存储小数有误差,采用Math.round()四舍五入得整数  
                icur = Math.round(parseFloat(getStyle(obj,attr))*100);  
            }else{  
                icur = parseInt(getStyle(obj,attr));  
            }  
            //2)计算速度
            var speed = (json[attr] - icur)/10;  
            speed = speed>0?Math.ceil(speed):Math.floor(speed);  

            //3)判断运动是否结束 ,检测停止 
            //只能判断到一个目标值达到,就停止检测了。
            if(icur != json[attr]){ //假设有目标值没有到达
                flag = false; 
            }
            if(attr == "opacity"){  
                icur += speed;  
                obj.style.filter = "alpha(opacity:"+ icur +")";  
                obj.style.opacity = icur/100;  
            }else{  
                obj.style[attr] = icur + speed + "px";  
            }        
        }
        if(flag){//flag=true,所有的目标值都到达
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30);  
}
//获取属性值  
function getStyle(obj,attr){   
    if(obj.currentStyle){ //兼容IE浏览器  
        return obj.currentStyle[attr];  
    }else{  //兼容firefox浏览器  
        return getComputedStyle(obj,false)[attr];  
    }  
}  


猜你喜欢

转载自blog.csdn.net/qq_empire/article/details/80891189
今日推荐