多物体缓冲运动

前端界面中，存在各种各样的运动，其中缓冲运动由于其视觉效果好的特点被广泛使用。

缓冲运动与匀速运动最大的差别在于，其速度不是一个恒定的值，而是随着元素的位置离目标位置距离的缩小而变小，因此在视觉上的效果较为平滑。

在编写运动框架时，主要有以下步骤：

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>