javascript动画效果——速度动画

运动框架实现思路

1.速度（改变left，right，width，height，opacity）
2.缓冲运动
3.多物体运动
4.任意值变化
5.链式运动

简单的动画实现效果

1.计时器的设置setInterval,clearInterval
2.offsetLeft属性，可以判断一个物体与document的左边距离，也就是浏览器的左边
3.setInterval(code,millisec)
code是必须的，要调用的函数或者代码块，millisec也是必须的，就是调用的周期！一班、般和clearInterval共同使用，因为如果没有clearInterval 的话是不能停止的
4.clearInterval()方法可以取消setInterval设置的timeout。其参数一定是setInterval()返回的ID值

    <script type="text/javascript">
        window.onload=function(){//一开始加载的时候
            var oDiv=document.getElementById('div1');//获得元素的id
            oDiv.onmouseover=function(){
                startMove(10,0);//正数代表往前走
            }
            oDiv.onmouseout=function(){
                startMove(-10,-200);//负数代表往后退
            }
        }
        var timer=null;
        function startMove(speed,iTarget){
            clearInterval(timer);
            var oDiv=document.getElementById('div1');
            timer=setInterval(function(){//timer为setInterval返回的id值
                if (oDiv.offsetLeft==iTarget) {
                    clearInterval(timer);//达到效果后清除
                }else{
                    oDiv.style.left=oDiv.offsetLeft+speed+'px';//左边的距离不断增加
                }
            },30)
        }
    </script>