<!doctype html><html><head> <meta charset="UTF-8"> <title>speed</title> <style type="text/css"> div{width: 100px;height: 50px;background: red;margin: 10px} </style> <script type="text/javascript"> window.onload=function() { var aDiv=document.getElementsByTagName('div') for(var i=0;i<aDiv.length;i++) { aDiv[i].timer=null aDiv[i].onmouseover=function() { startMove(this,400) } aDiv[i].onmouseout=function() { startMove(this,100) } } } function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startMove(obj,iTarget) { clearInterval(obj.timer) var curr=parseInt(getStyle(obj.width)) obj.timer=setInterval(function() { var speed=(iTarget-curr)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed) if(curr==iTarget) { clearInterval(obj.timer) } else { obj.style.width=curr+speed+'px' } },30) } </script></head><body> <div></div> <div></div> <div></div></body></html>
1 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
startMove()函数里面这句：var curr=parseInt(getStyle(obj.width))；
2个问题，
1、参数用逗号隔开，参数width要带引号，getStyle(obj,"width")；
2、这句话放到setInterval内部，因为每次循环都要获取它，即获取最新的width；如果放到setInterval外，则为固定值了，就没有动画效果
添加回答
举报
0/150
提交
取消