【代码】完美运动框架

最新推荐文章于 2019-02-11 09:26:48 发布

原创最新推荐文章于 2019-02-11 09:26:48 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#代码 #框架

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

//运动框架（完美版）


//获取非行间样式
function getStyle(obj, name) {
    if(obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj,false)[name];
    }
}

// startMove(oDiv, {'width':'300', height:400})
function startMove(obj, json, fnEnd) {
//清除定时器   
    clearInterval(obj.timer);

//设置定时器
    obj.timer = setInterval(function() {

        var flag = true;  //放一个变量，假设:所有值都已经到了

        //遍历json里面的数据组       
        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)/10;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            //运动

            if(cur != json[attr])
                flag = 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(flag) {
            clearInterval(obj.timer);
            if(fnEnd) fnEnd();
        }

    }, 30);
}