js（缓冲运动）

一、缓冲运动

      逐渐变慢，最后停止，距离越远速度越大，距离越近速度越小。

      速度由距离决定。

      速度 = （目标值-当前值）／缩放系数。

例如：让一个物体逐渐变慢到另一个位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 0px;
            top: 40px;
        }


    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            oBtn.onclick = function () {
                startMove(600);
            };
        };
        
        var timer = null;
        function startMove(target) {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function () {
                var speed = (target-oDiv.offsetLeft) / 10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';
            },30);
        }
    </script>
</head>
<body>
<input id='btn1' type="button" value="开始运动">
<div id="div1">
</div>
</body>
</html>

 

posted on 2017-05-12 10:15  懂你在爱我  阅读(139)  评论(0)  编辑  收藏  举报

导航