JS多个DIV变宽
思路：有多个物体运动时，当切换到另外一个时就要把当前物体运动的定时器关闭
运动框架：
1、先关闭当前DIV的定时器 clearInterval(obj.timer)
2、开启当前DIV的定时器obj.timer=setInterval()
2.1、定义物体运动的速度。速度等于目标(形参)减去当前DIV的宽度 obj.offsetWidth
2.2、用三目运算符把速度向上取整Math.ceil()和向下取整Math.floor()
2.3、用if判断，当当前DIV宽度等于目标值(iTarget)就清除当前DIV的定时器clearInterval(obj.timer)，否则else就设置DIV的宽度等于当前DIV宽度加上速度运动起来。
鼠标移出移入：
3、获取元素
4、for循环历遍所有DIV，给每个DIV添加一个timer定时器（这是自定义属性）
5、添加鼠标指向事件
6、添加鼠标离开事件
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>多个DIV运动</title> 6 <style> 7 div{width:100px;height:50px;background:red;margin:10px;} 8 </style> 9 <script> 10 window.onload=function() 11 { 12 aDiv=document.getElementsByTagName('div'); 13 14 for(var i=0;i<aDiv.length;i++) //循环历遍 15 { 16 aDiv[i].timer=null; //给每个Div添加一个定时器timer，这是自定义属性 17 18 aDiv[i].onmouseover=function() //当前DIV鼠标移入就触发运动框架 19 { 20 startMove(this,1000); //两个实参，this当前DIV,这个this实参会传到obj形参去 21 }; 22 aDiv[i].onmouseout=function() 23 { 24 startMove(this,100); 25 }; 26 }; 27 }; 28 29 function startMove(obj,iTarget) //两个形参，一个是指当前物体，一个是目标值（就是变宽运动的值） 30 { 31 clearInterval(obj.timer); 32 obj.timer=setInterval(function(){ //定义速度，速度等于目标值（实参）减去当前DIV宽度除10 33 var speed=(iTarget-obj.offsetWidth)/10; 34 speed=speed>0?Math.ceil(speed):Math.floor(speed); //用三目运算符，当速度大于0就向上取整，否则就向下取整。 35 36 if(obj.offsetWidth==iTarget) //如果当DIV前宽度等于实参传过来的目标值 37 { 38 clearInterval(obj.timer); //就清除当前DIV的定时器，就能返回滚 39 } 40 else 41 { 42 obj.style.width=obj.offsetWidth+speed+'px'; //如果当前DIV前宽度不等于实参传过来的目标值，就把当前DIV的宽度设置为DIV宽度加速度 43 } 44 },30); 45 }; 46 </script> 47 </head> 48 49 <body> 50 <div></div> 51 <div></div> 52 <div></div> 53 </body> 54 </html>
