注意,这里的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);};