为了账号安全,请及时绑定邮箱和手机立即绑定
function getStyle(elem,attr){
    var result = null;
    result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem,false)[attr];
    if(attr=="opacity"){
        return parseInt(parseFloat(result)*100);
    }
    return parseInt(result);
}

var timer = null;
//多个属性同时变化
function startMove(elem,json,fn){
    var isStop = true;            //所有值都到达
    clearInterval(elem.timer);
    elem.timer = setInterval(function(){
        //历遍json属性
        for(var attr in json){
            //1.取当前与速度
            var offset  = json[attr];
            var curAttr = getStyle(elem,attr);
            var speed   = (offset - curAttr)/8;
            speed = speed > 0? Math.ceil(speed):Math.floor(speed);
            
            //2.检测停止
            if(offset!=curAttr){
                isStop = false;
            }
            if(attr=="opacity"){
                elem.style.filter = "alpha(opacity:"+(curAttr+speed)+")";
                elem.style.opacity= (curAttr+speed)/100;
            }else{
                elem.style[attr] = curAttr + speed + "px";
            }
        }
        //所有值都到达目标值,则停止
        if(isStop){
            clearInterval(elem.timer);
            if(fn){ fn(); }
        }
    },30);
}


正在回答

0 回答

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程
意见反馈 帮助中心 APP下载
官方微信