js动画--一个小bug处理下

对于上面的课程我们很好的处理了一个小bug，那么我们现在讲程序进行优化一下，前一节的程序中，我们处理处理的属性都是写死了的。为了我们能够很好的对某个属性进行操作的话。我们这样来设置。

js文件

window.οnlοad=function(){
    var ls=document.getElementsByTagName("li");
    for(var i=0,l=ls.length;i<l;i++){
        ls[i].timer=null;
        ls[i].onmouseover=function(){
            startMove(this,"width",400);
        }
        ls[i].onmouseout=function(){
            startMove(this,"height",400);
        }
    }
}
function startMove(object,attr,Target){
    //alert(parseInt(getStyle(object,attr));
    clearInterval(object.timer);
    object.timer=setInterval(function(){
        var speed=(Target-parseInt(getStyle(object,attr)))/10;
        speed=speed>0? Math.ceil(speed):Math.floor(speed);
        if(parseInt(getStyle(object,attr))==Target){
            clearInterval(object.timer);
        }else{
            object.style[attr]=parseInt(getStyle(object,attr))+speed+"px";//这个地方，我们设置属性通过object.style[attr]来设置的。
        }
    },50)
}
function getStyle(object,attr){
    if(object.currentStyle){
        return object.currentStyle[attr];//IE浏览器
    }else if(getComputedStyle){
        return getComputedStyle(object,false)[attr];//火狐浏览器
    }
}

 

转载于:https://www.cnblogs.com/yuaima/p/5118470.html