JS实现物体缓冲运动

东方求败、

已于 2022-02-28 16:49:58 修改

阅读量268

点赞数

分类专栏： javascript复习之路 # javascript面向对象文章标签： javascript 前端开发语言

于 2022-02-28 16:48:42 首次发布

本文链接：https://blog.csdn.net/wang_swa99er/article/details/123185799

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript面向对象

10 篇文章 0 订阅

订阅专栏

JS实现物体缓冲运动

缓冲运动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{margin: 0px;padding: 0px;}
            #div1{width: 100px;height: 100px; position: absolute;left: 0px;top: 300px;background-color: red;}
        </style>
        <script>

            /* 
                刹车

                不是物理规律的特点：速度与距离成正相关

                var speed = 距离
                var speed = iTarget - iCur

                【注】计算机最小能识别的像素是一像素
            */

           window.onload = function(){
               var oBtn = document.getElementById("btn1");
               var oDiv1 = document.getElementById("div1");

               oBtn.onclick = function(){
                    startMove(500);
               }
               var timer = null;
               function startMove(iTarget){
                   var oDiv1 = document.getElementById("div1");
                   clearInterval(timer);
                   timer = setInterval(function(){

                    var speed = (iTarget - oDiv1.offsetLeft)/10;//目的值-当前值(速度距离公式)
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        if(oDiv1.offsetLeft == iTarget){
                            clearInterval(timer);
                        }else{
                            oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
                        }

                        var oTxt1 = document.getElementById("txt1");
                        oTxt1.value += speed + "," + oDiv1.offsetLeft + "\n";
                   },30);
               }
           }
        </script>
    </head>
    <body>
        <button id = 'btn1'>开始运动</button>
        <div id = 'div1'></div>
        <textarea name="" id="txt1" cols="30" rows="10"></textarea>
        <span style='width: 1px;height: 500px;background-color: black;position: absolute;left: 500px;'></span>
    </body>
</html>

效果：
缓冲运动

缓冲运动_反向（修改div left值即可）
效果：

相关回顾：JS实现物体运动

东方求败、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现物体缓冲运动

JS实现物体缓冲运动缓冲运动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
复制链接

扫一扫