<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding: 0}div{width: 100px;height: 100px;background-color: red;position: relative;top: 0px;margin-bottom: 10px;border: 2px solid #000}</style></head><body><div ></div><div ></div><div ></div><div ></div></body><script type="text/javascript">window.onload=function(){var oDiv=document.getElementsByTagName('div');for(var i=0;i<oDiv.length;i++){oDiv[i].timer=null;oDiv[i].onmouseover=function(){moveto(this,300);//让宽到300}oDiv[i].onmouseout=function(){moveto(this,100);}}}function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; } else{ return getComputedStyle(obj,null)[style]; }}function moveto(obj,itarget){clearInterval(obj.timer);obj.timer=setInterval(function(){var icur=parseInt(getStyle(obj,'width'));var speed=(itarget-icur)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(icur==itarget){clearInterval(obj.timer);}else{obj.style.width=icur+speed+'px'//console.log(icur+' ,'+speed+' ,'+obj.style.width);}},30)}</script></html>
添加回答
举报
0/150
提交
取消