js封装多物体运动方法

一、实现

var div = document.getElementsByTagName('div');
for(var i = 0;i < div.length;i ++){
    div[i].onmouseenter = function(){
        cushion(this,800);//利用this，防止形成闭包
    };
    div[i].onmouseleave = function(){
        cushion(this,100);
    };
};
function getStyle(dom,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(dom,null)[attr];
    }else{
        return dom.currentStyle[attr];
    }
}//兼容方法获取元素属性值
var timer;//起开关作用
function cushion(dom,target){
    clearInterval(dom.timer);
    var speed,iCur;
    dom.timer = setInterval(function(){
    //将timer变成dom属性，防止快速访问多个dom时启用共同定时器
        iCur = parseInt(getStyle(dom,'width'));
        speed = (target - iCur)/7;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(iCur == target){
            clearInterval(dom.timer);
        }else{
            dom.style.width = iCur + speed + 'px';
        }
    },40)
};