首先我定义3个div每个div当我鼠标放上去的时候，他的宽度就表达，如下图
首先是样式和html代码
1 <style> 2 div{ 3 width:100px; 4 height:50px; 5 background:red; 6 margin-bottom:10px; 7 } 8 </style> 9 10 <body> 11 <div></div> 12 <div></div> 13 <div></div> 14 </body>
js代码如下，带注释
1 <script> 2 //重点是给每个对象加个定时器 3 window.onload=function() 4 { 5 var div1= document.getElementsByTagName('div'); //获取每个div 6 7 for(var i=0;i<div1.length;i++) //当移到哪个div，哪个div发生变化 8 { 9 div1[i].timer=null; //首先将定时器清空以免发生其他问题 10 div1[i].onmouseover=function() 11 { 12 startMove(this,400); 13 }; 14 div1[i].onmouseout=function() 15 { 16 startMove(this,100); 17 }; 18 } 19 }; 20 21 function startMove(obj,iTarget) 22 { 23 clearInterval(obj.timer); 24 obj.timer=setInterval( 25 function() 26 { 27 var speed=(iTarget-obj.offsetWidth)/5; // 定义速度 28 29 speed=speed>0?Math.ceil(speed):Math.floor(speed); //速度去上限的限 30 if (obj.offsetWidth==iTarget) //如果宽度已经增加到需要的宽度。停止计时器 31 { 32 clearInterval(obj.timer); 33 } 34 else //不断增加宽度直到到iTarget的值 35 { 36 obj.style.width=obj.offsetWidth+speed+'px'; 37 } 38 39 } 40 , 30) 41 } 42 </script> 43
感觉不难，重点进入函数都得清理一下定时器