码迷,mamicode.com
首页 > 其他好文 > 详细

完美运动框架

时间:2020-02-17 18:11:20      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:lse   span   name   停止   class   city   地方   floor   timer   

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }
    else {
        return getComputedStyle(obj, false)[name];
    }
}

//startMove(oDiv, {width:400, height:400})

function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var bStop = true;//假设所有的值都已经到了

        //根据运动框架改动,不同的地方
        for (var attr in json) {
            var cur = 0; //parseInt(getStyle(obj, attr));
            if (attr == ‘opacity‘) {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            }
            else {
                cur = parseInt(getStyle(obj, attr));
            }

            var speed = (json[attr] - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if (cur != json[attr])
                bStop = false;

            if (attr == ‘opacity‘) {
                obj.style.filter = ‘alpha(opacity:‘ + (cur + speed) + ‘)‘;//IE使用
                obj.style.opacity = (cur + speed) / 100;//chrome和FF使用
            }
            else {
                obj.style[attr] = cur + speed + ‘px‘;
            }
       }
        //最后判断是否都到了,如果都到了,停止计数器
        if (bStop) {
            clearInterval(obj.timer);
            //alert(‘ok‘);
            if (fnEnd) fnEnd();
        }

    }, 30);
}

 

完美运动框架

标签:lse   span   name   停止   class   city   地方   floor   timer   

原文地址:https://www.cnblogs.com/bedfly/p/12322565.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!