前端界面中，存在各种各样的运动，其中缓冲运动由于其视觉效果好的特点被广泛使用。
缓冲运动与匀速运动最大的差别在于，其速度不是一个恒定的值，而是随着元素的位置离目标位置距离的缩小而变小，因此在视觉上的效果较为平滑。
在编写运动框架时，主要有以下步骤：
1、清除原来的定时器；
2、编写动作。需要对运动停止的条件进行判断，在符合停止条件时，立即清除定时器；不符合停止条件时，继续运动。特别指出，需要利用if...else语句对符合停止条件和不符合停止条件的动作进行分隔处理，以免程序出错。
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>多物体运动</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="布尔教育 http://www.itbool.com" /> <style> div{ 100px;height: 50px;background: grey; top:0;left: 0;margin-top: 30px;} </style> <script> var sDiv=document.getElementsByTagName("div"); window.onload=function() { for(var i=0;i<sDiv.length;i++) { //为每个div设置单独的定时器 sDiv[i].timer=null; //为各个div设置移入移出事件 sDiv[i].onmouseover = function() { starMove(this,400); } sDiv[i].onmouseout = function() { starMove(this,30); } } } function starMove(obj,iTarget) { clearInterval(obj.timer);//清除定时器 obj.timer=setInterval(function(){ //速度随着离运动目标的接近而变小。速度带正负 var iSpeed=(iTarget-obj.offsetWidth)/7; iSpeed>0?iSpeed=Math.ceil(iSpeed):iSpeed=Math.floor(iSpeed); if(iTarget==obj.offsetWidth) { clearInterval(obj.timer); } else { obj.style.width=obj.offsetWidth+iSpeed+"px"; } },30) } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>