js封装多物体多属性运动+回调执行方法

一、执行

var div1 = document.getElementsByTagName('div')[0];
var div2 = document.getElementsByTagName('div')[1];
div1.onclick = function(){
    movetion(this,{width: 400,height: 400,opacity: 70,top: 300,left: 300},function(){
    	movetion(div2,{width: 400,height: 400,opacity: 70,top: 300,left: 300},function(){
            console.log('ok');//透明度需要扩大一百倍，后面会说明
        });//函数里面可以调用其他函数来执行运动
    });
};
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr];
    }else{
        return dom.currentStyle[attr];
    }
};//获取dom对象属性值
var timer;//开关
function movetion (dom,attrObj,callback){
    clearInterval(dom.timer);//防止多次点击
    var speed,iCur;
    dom.timer = setInterval(function(){
        var key = true;//判断的依据
        for(var attr in attrObj){//遍历数组中设置属性的值
            if(attr == 'opacity'){//透明图要特殊处理，防止小数被忽略
                iCur = parseFloat(getStyle(dom,attr)) * 100;
            }else{
                iCur = parseInt(getStyle(dom,attr));
            };
            speed = (attrObj[attr] - iCur)/7;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(attr == 'opacity'){
                dom.style.opacity = (iCur + speed)/100;
            }else{
                dom.style[attr] = iCur + speed + 'px';//dom.attr会被当做属性而不是变量
            };
            if(iCur != attrObj[attr]){//如果没有实现设置的值
                key = false;//关锁
            };
        };
        if(key){//锁开，关闭定时器
            clearInterval(dom.timer);
            typeof callback == 'function' && callback();//传入的时回调函数再执行
        };
   },50)
}