注意,这里的CSS中有border,但是仍然能够顺利运行
var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); var oDiv4=document.getElementById('div4'); function getStyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } } function startMove(obj,attr,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function() { var cur=parseInt(getStyle(obj,attr)); var speed=(iTarget-cur)/6; speed=speed>0 ? Math.ceil(speed) : Math.floor(speed); if(cur === iTarget) { clearInterval(obj.timer); } else { obj.style[attr]=cur+speed+'px'; } },30) } oDiv1.onmouseover=function(){startMove(this,'height',400);}; oDiv1.onmouseout=function(){startMove(this,'height',200);}; oDiv2.onmouseover=function(){startMove(this,'width',400);}; oDiv2.onmouseout=function(){startMove(this,'width',200);}; oDiv3.onmouseover=function(){startMove(this,'fontSize',50);}; oDiv3.onmouseout=function(){startMove(this,'fontSize',14);}; oDiv4.onmouseover=function(){startMove(this,'borderWidth',50);}; oDiv4.onmouseout=function(){startMove(this,'borderWidth',1);};