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

接近完美运动框架

时间:2016-09-01 14:28:43      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

//接近完美运动框架,支持同一对象属性同时进行运动。运动完成后执行方法


function goChange(obj, josn, fn) {//obj:传入对象实参;josn:传入{属性/属性值,...}的josn串;fn传入需要在执行完运动后被执行的函数
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;
        for (var attr in josn) {
            var iCour=0;
            if (attr==‘opacity‘) {
                iCour=Math.round(parseFloat(getAttr(obj, attr))*100);
            }
            else{
                iCour = parseInt(getAttr(obj, attr));
            }
            var speed = (josn[attr] - iCour) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (iCour != josn[attr]) {
                flag = false;
                // clearInterval(obj.timer);
            }
            if (attr==‘opacity‘) {
                obj.style[attr] = (iCour + speed)/100;
            }
            else{
                obj.style[attr] = iCour + speed + ‘px‘;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);
}







//获取属性
function getAttr(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr];
}

 

接近完美运动框架

标签:

原文地址:http://www.cnblogs.com/superZz/p/5829416.html

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