标签：
问题代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> *{margin:0; padding:0;} body{ background:#D1D1D1} ul,li{list-style:none;} ul li{width:200px;height:100px; background:black; margin-bottom:20px;} </style> <script> window.onload=function(){ var aLi=document.getElementsByTagName(‘li‘); for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover=function(){ startMove(this,600); } aLi[i].onmouseout=function(){ startMove(this,200); } } } //第一步：定义定时器 var timer=null; function startMove(obj,target){ //第二步：关闭定时器。开定时器首先必须关闭定时器，否则会有叠加效果 clearInterval(obj.timer); //第三步：开定时器。一定要写timer=set(……); obj.timer=setInterval(function(){ //第四步：定义速度。 var speed=(target-obj.offsetWidth)/10; //第五步：取整。缓冲运动一定要取整，否则会有bug speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; }; } ,30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
问题现象：
以上代码执行后，当鼠标快速滑过并离开每个li时，每一个li无法到达和恢复目标宽度。
问题原因：
所有li都在共享一个定时器，在滑动过程中，范围内的li都在争抢一个定时器，无法达到预期效果。
解决方案：
给每一个li都绑定一个定时器。
最终代码如下（关键代码用背景红色标注）：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> *{margin:0; padding:0;} body{ background:#D1D1D1} ul,li{list-style:none;} ul li{width:200px;height:100px; background:black; margin-bottom:20px;} </style> <script> window.onload=function(){ var aLi=document.getElementsByTagName(‘li‘); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,600); } aLi[i].onmouseout=function(){ startMove(this,200); } } } //第一步：定义定时器 //var timer=null; function startMove(obj,target){ //第二步：关闭定时器。开定时器首先必须关闭定时器，否则会有叠加效果 clearInterval(obj.timer); //第三步：开定时器。一定要写timer=set(……); obj.timer=setInterval(function(){ //第四步：定义速度。 var speed=(target-obj.offsetWidth)/10; //第五步：取整。缓冲运动一定要取整，否则会有bug speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+"px"; }; } ,30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
标签：
原文地址：http://www.cnblogs.com/mirror1988/p/4796695.html
