javascript学习日记之运动（一）

1.匀速运动（速度不变）

运动的简单实现

运动: 顾名思义就是让物体动起来!到达你想要的效果或者说想要的位置。
我想让一个方块（DIV）动起来并且到达一个指定的位置。怎么让一个DIV 动起来这时候就用到setInterval（）函数也就是定时器。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div {width:100px; height:100px; position:absolute; background:yellow; left:0; top:50px;}
    </style>
    <script>
        function startMove()
        {
            var Div=document.getElementById('div');
            setInterval(function (){
                Div.style.left=Div.offsetLeft+10+'px';
            }, 30);
        }
    </script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()">
<div id="div"></div>
</body>
</html>

但是运行起来你发现他并不会停因为本来就没有让他停想要让div停只要关掉定时器就行但是前提是你要让div停在你想要的位置上比如说当div运动到300px的时候在停下

var timer=null;
function startMove()
{
    var Div=document.getElementById('div');
    timer=setInterval(function (){
        if(Div.offsetLeft>=300)//判断运动是否到达终点
        {
            clearInterval(timer);//关掉定时器
        }
        Div.style.left=Div.offsetLeft+10+'px';
    }, 30);
}

这里我们div的offsetleft大于等于300而不是等于300 是因为当速度不正好是你运动距离的整除数还是不会停止避免这类情况发生

好吧看似这个简单的div运动应该没问题了但是当物体已经运动到终点时再点击按钮开始运动你会发现div还是会动一下在停止这又是为什么呢

  Div.style.left=Div.offsetLeft+10+'px';

让我们来看看这段代码的意思让物体以10px的速度在运动所以这应该是物体没到达终点之前应该做的事情吧

  clearInterval(timer);//关掉定时器

而关掉定时器是到达终点做的事情好像有点自相矛盾了呢这里我们得加个else 语句意思就是如果到达终点关掉定时器没有
则继续运动。

var timer=null;
function startMove()
{
    var Div=document.getElementById('div');
    timer=setInterval(function (){
        if(Div.offsetLeft>=300)//判断运动是否到达终点
        {
            clearInterval(timer);//关掉定时器
        }else{
            Div.style.left=Div.offsetLeft+10+'px';
        }
    }, 30);
}

这总归没问题了吧好吧手贱的我物体（div）还没到达终点时又多点了几下开始运动，惊奇的发现速度变快了这是为什么呢
其实呢还是定时器的问题的因为你还没到终点时没点一下就会产生一个定时器速度自然而然快了就好比做项目一个人做又累又慢哎公司又招了2个前端工作量明显减少不少。
解决办法的就是在开启定时器之前关闭所有定时器

 clearInterval(timer);

总结一下让物体运动动起来的问题

怎么停止（关闭定时器）
到达终点再次点击还会运动
没到达终点再次点击速度加快

实现分享到运动的例子

如图一样的效果:

其实好吧我在好多博客网站看到过。
如何实现呢把复杂的东西先简单化当鼠标移动到分享到按钮时div的offset运动到指定位置
鼠标移开div的offset又回到初始位置
起初我会这么写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>分享到</title>
    <style>
        #div {width:100px; height:200px; background:#CCC; position:absolute; left:-100px;}
        #div span {width:20px; height:60px; line-height:20px; text-align:center; left:100px; top:70px; background:yellow; position:absolute;}
    </style>
    <script>
    window.onload=function ()
    {
        var Div=document.getElementById('div');
        Div.onmouseover=function ()
        {
            startMove();
        }
        Div.onmouseout=function ()
        {
            startMove2();
        }
    }
    var timer=null;
    function startMove()
    {
        var Div=document.getElementById('div');
        clearInterval(timer);
        timer=setInterval(function (){
            var iSpeed=10;
            if(Div.offsetLeft==0)
            {
                clearInterval(timer);
            }
            else
            {
                Div.style.left=Div.offsetLeft+iSpeed+'px';
            }
        }, 30);
    }
    function startMove2()
    {
        var Div=document.getElementById('div');
        clearInterval(timer);
        timer=setInterval(function (){
            var iSpeed=-10;

            if(Div.offsetLeft==-100)
            {
                clearInterval(timer);
            }
            else
            {
                Div.style.left=Div.offsetLeft+iSpeed+'px';
            }
        }, 30);
    }
</script>
</head>
<body>
<div id="div">
    <span>分享到</span>
</div>
</body>
</html>

好吧看起来没问题效果也实现但是代码有点过多需要优化
如何解决这个问题
startMove()和startMove2()函数根本上就是两个基本上一样的函数
不同的是终点值所以需要合并一下我们只要把终点值当参数传递
就可以了 javascript代码：

window.onload=function ()
{
    var Div=document.getElementById('div');
    Div.onmouseover=function ()
    {
        startMove(0);
    }
    Div.onmouseout=function ()
    {
        startMove(-100);
    }
}
var timer=null;
function startMove(iTarget)
{
    var Div=document.getElementById('div');
    clearInterval(timer);
    timer=setInterval(function (){
        var iSpeed=0;
        if(Div.offsetLeft<iTarget) //物体offsetleft值没到达终点值
        {
            iSpeed=10; //速度为正
        }else
        {
            iSpeed=-10; //否则速度为负
        }
        if(Div.offsetLeft==iTarget)
        {
            clearInterval(timer);
        }else
        {
            Div.style.left=Div.offsetLeft+iSpeed+'px';
        }
    }, 30);
}

2.缓冲运动

原理：速度有快到慢，当到达目标点时运动停止。也就是说速度是由距离决定的
物体与目标点距离越大，速度越大物体与目标点距离越小，速度越小。
速度公式：（目标值-物体当前距离）/缩放系数
javascript代码

        var timer=null;
        function startMove(iTarget)
        {
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function (){
            var iSpeed=(iTarget-oDiv.offsetLeft)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //速度取整 如果不是整数 到达目标点就会有误差
            if(oDiv.offsetLeft==iTarget)//是否到达终点
            {
                clearInterval(timer);   //到达终点
            }else
            { 
            oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//到达之前
            }
            document.title=oDiv.offsetLeft+',speed='+iSpeed;
        }, 30);
    }

3.多物体同时体运动

多物体同时运动的问题是，需要在在每个物体的加个定时器不然当一个物体运动还没有结束其他物体继续运动就会卡在那这是共用一个定时器的后果。因为是多个物体所以我们得给运动函数加个物体（obj）参数。

//多个DIV 变宽
window.onload=function ()
{
    var aDiv=document.getElementsByTagName('div');
    var i=0;
    for(i=0;i<aDiv.length;i++)
    {
        aDiv[i].timer=null;
        aDiv[i].onmouseover=function ()
        {
            startMove(this, 300 ); //当前鼠标移入的物体
        }
        
        aDiv[i].onmouseout=function ()
        {
            startMove(this, 100);
        }
    }
}
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var iSpeed=(iTarget-obj.offsetWidth)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        if(obj.offsetWidth==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style.width=obj.offsetWidth+iSpeed+'px';
        }
    }, 30)
}