<!DOCTYPE html><html><head><meta charset="UTF-8"><title>多物体运动</title><style>*{margin:0;padding:0;}div{width:200px;height:100px;background:#abc;margin-bottom: 20px;}</style></head><body><div></div><div></div><div></div><script>window.onload = function(){var iDiv = document.getElementsByTagName("div");for(var i = 0 ;i < iDiv.length;i++){iDiv[i].onmouseover = function(){startMove(this,400);};iDiv[i].onmouseout = function(){startMove(this,200);};}};function startMove(obj,destination){clearInterval(obj.timer); //将此处改为 obj.timer = null；为什么运行之后在为到达目的地时候鼠标移除div会抽搐obj.timer = setInterval(function(){var speed = (destination - obj.offsetWidth)/8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);if(destination == obj.offsetWidth){clearInterval(obj.timer);}else{obj.style.width = obj.offsetWidth + speed +"px";} },30);}</script></body></html>
添加回答
举报
0/150
提交
取消