<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 50px; background: yellow; margin: 10px; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for (var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].onmouseover=function(){ move(300,this); }; oDiv[i].onmouseout=function(){ move(100,this); }; } }; function move(iTarget,oDiv){ clearInterval(oDiv.timer); oDiv.timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetWidth)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (iTarget==oDiv.offsetWidth){ clearInterval(oDiv.timer); }else{ oDiv.style.width=oDiv.offsetWidth+speed+"px"; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>
注意事项：
多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。
问题二：
希望实现的功能：多图片的淡入淡出。
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; margin: 10px; background: yellow; float: left; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].timer=null; oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ move(100,this); }; oDiv[i].onmouseout=function(){ move(30,this); }; } }; function move(iTarget,obj){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-obj.alpha)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if (obj.alpha==iTarget){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter="alpha(opacity:"+obj.alpha+")"; obj.style.opacity=obj.alpha/100; } },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
希望实现的功能：多物体不同方向的伸缩功能。
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; height: 100px; margin: 10px; background: yellow; float: left; border: 10px solid black; } </style> <script> window.onload=function(){ var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); oDiv1.timer=null; oDiv2.timer=null; oDiv1.onmouseover=function(){ move(this,400,'height'); }; oDiv1.onmouseout=function(){ move(this,100,'height'); }; oDiv2.onmouseover=function(){ move(this,400,'width'); }; oDiv2.onmouseout=function(){ move(this,100,'width'); }; }; function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } }; function move(obj,iTarget,name){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=parseInt(getStyle(obj,name)); var speed=(iTarget-cur)/30; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur==iTarget){ clearInterval(obj.timer); }else{ obj.style[name]=cur+speed+"px"; } },30); }; </script> </head> <body> <div></div> <div></div> </body> </html>
注意事项：
1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。
完整的运动框架：