对于上面的课程我们很好的处理了一个小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];//火狐浏览器 } }