为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
JavaScript
//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];  
    }  
}  
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消