继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

陈先森
关注TA
已关注
手记 14
粉丝 5
获赞 173
//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];  
    }  
}  
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP