问题代码:
<!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>
时间: 2024-10-10 16:20:49