js实现减速运动

浏览数：59 / 时间：2015年06月09日

这个实现效果是在老师的提点下完成的，当时自己一直陷入在怎样才能够实现匀减速运动中不能出来，代码中的亮点已经表明……欢迎大家指正交流……

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>减速运动</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #oplay{
            width:200px;
            height:200px;
            position: absolute;
            left:0;
            background-color: #B7B7B7;
        }
        #start_btn{
            position: absolute;
            top:220px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="oplay"></div>
    <button id="start_btn">开始运动</button>
    <script>
        var oplay = document.getElementById("oplay");
        var start_btn = document.getElementById("start_btn");
        var interval,speed;
        start_btn.onclick = function(){
            clearInterval(interval);
            interval = setInterval(function(){
                if(oplay.offsetLeft>=300){
                    clearInterval(interval);
                }else{
                    //这个地方是关键，怎样才能够使speed在移动元素在停止的时候正好速度为0
                    speed = (300-oplay.offsetLeft)/10;
                    oplay.style.left = oplay.offsetLeft+speed+"px";
                }
            },30);
        }
    </script>
</body>
</html>