【JavaScript】用原生js来实现元素的缓冲运动

缓冲运动

缓冲运动是指，运动物体的速度由快到慢，逐渐停止。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50px; left: 0;}
    </style>
</head>

<body>
    <input type="button" value="开始运动" onclick="startMove()">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>速度与距离目标位置的大小成正比</li>
    </ol>
    <script>
        var timer = null //存放定时器的返回值，用于关闭定时器
        var speed = 0
        function startMove() {
            var oDiv = document.getElementById('div1');
            clearInterval(timer)
            setInterval(function(){
                var speed = (300 - oDiv.offsetLeft)/10 //分母越大，速度越小
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) //保证速度始终为整数
                oDiv.style.left = oDiv.offsetLeft + speed + 'px'
                console.log(oDiv.offsetLeft,speed)
            }, 30)
        }
    </script>
</body>

Math方法

    <script>
        alert(Math.ceil(291.99)) //向上取整 292 
        alert(Math.ceil(-291.1)) //向上取整 -291
        alert(Math.floor(3.99)) //向下取整 3
        alert(Math.floor(-3.99)) //向下取整 -4
        alert(Math.abs(-6)) //绝对值 6
        alert(Math.abs(6)) //绝对值 6
        alert(Math.round(3.2)) //四舍五入 3
        alert(Math.round(-3.6)) //四舍五入 4
    </script>

实例1、屏幕右侧悬浮框（右下角）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; bottom: 0; right: 0;}
    </style>
</head>

<body style="height: 2000px;">
    <div id="div1"></div>
    <script>
        
        window.onscroll = function(){
            var oDiv = document.getElementById('div1')
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //解决兼容性
            //oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'
            startMove(document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop) //可是区域的高度 - 元素高度 + 滚动的高度
        }
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = (iTarget - oDiv.offsetTop) / 8
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                if(oDiv.offsetTop == iTarget){
                    clearInterval(timer)
                }else{
                    oDiv.style.top = oDiv.offsetTop + speed + 'px'
                }
            }, 30)
        }
    </script>
</body>

实例2、对联悬浮框（垂直居中）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; bottom: 0; right: 0;}
    </style>
</head>

<body style="height: 2000px;">
    <div id="div1"></div>
    <script>
        window.onscroll = function(){
            var oDiv = document.getElementById('div1')
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //解决兼容性
            //oDiv.style.top = (document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop  + 'px'
            startMove(parseInt((document.documentElement.clientHeight - oDiv.offsetHeight) / 2 + scrollTop)) //(可是区域的高度 - 元素高度) / 2 + 滚动的高度
        }  //要将目标位置取整，否则会出现元素抖动的问题
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = (iTarget - oDiv.offsetTop) / 8
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
                if(oDiv.offsetTop == iTarget){
                    clearInterval(timer)
                }else{
                    oDiv.style.top = oDiv.offsetTop + speed + 'px'
                }
            }, 30)
        }
    </script>
</body>

实例3、匀速运动的停止

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50px; left: 0;}
</head>

<body>
    <input type="button" value="开始运动" onclick="startMove(100)">
    <div id="div1"></div>
    <script>
        var timer = null //存放定时器的返回值，用于关闭定时器
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1')
            clearInterval(timer) //原则1、在开始运动之前，关闭已有定时器
            timer = setInterval(function () {
                var speed = 0
                if(oDiv.offsetLeft > iTarget){ //通过目标位置和当前位置判断 speed 的正负
                    speed = -7 //如果当前位置比目标位置大 speed 为负
                }else{
                    speed = 7 //反之为正
                }
                if (Math.abs(iTarget - oDiv.offsetLeft) <= 7) { //目标位置和 offsetLeft 之间的间距小于 speed，就认为已达到目标位置
                    clearInterval(timer)
                    oDiv.style.left = iTarget + 'px' // 设置直接达到目标位置
                } else {
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px'
                }
            }, 30)
        }
    </script>
</body>