JavaScript物体运动二

最新推荐文章于 2022-02-21 19:41:16 发布

可芭乐

最新推荐文章于 2022-02-21 19:41:16 发布

阅读量262

点赞数 1

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/a839371666/article/details/54695363

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

缓冲运动、缓冲菜单、匀速运动停止条件

缓冲运动
1、逐渐变慢，最后停止
2、距离越大速度越大
速度由距离决定
速度 = （目标值 - 当前值）/缩放系数
Math.ceil（数字） -> 向上取整（）
Math.floor（数字） -> 向下取整（）
clientHeight可视区的高度
缓冲菜单
Bug：速度取整
跟随页面滚动的缓冲侧边栏
问题：目标值不是整数时
当右侧菜单栏在最下边的时候：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body {
        height: 2000px;
    }
    #div1 {
        width: 100px;
        height: 150px;
        background: red;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
</style>
<script type="text/javascript">
    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)/6;
            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>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

当右侧菜单栏在中间的时候：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body {
        height: 2000px;
    }
    #div1 {
        width: 100px;
        height: 150px;
        background: red;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
</style>
<script type="text/javascript">
    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));
    };

    var timer = null;

    function startMove (iTarget){
        var oDiv = document.getElementById('div1');

        clearInterval(timer);
        timer = setInterval(function (){
            var speed = (iTarget-oDiv.offsetTop)/6;
            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>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

为了防止跳动，可能上下会有1个像素的误差

匀速运动停止条件
匀速运动：距离足够近
缓冲运动：两点重合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 600px;top: 50px;
    }
    #div2 {
        width: 1px;
        height: 300px;
        background: black;
        position: absolute;
        left: 300px;top: 0px;
    }
    #div3 {
        width: 1px;
        height: 300px;
        background: black;
        position: absolute;
        left: 100px;top: 0px;
    }
</style>
<script type="text/javascript">
var timer = null;
    function startMove (iTarget){

        var oDiv = document.getElementById('div1');

        clearInterval(timer);

        timer = setInterval(function(){
            var speed = 0;

            if (oDiv.offsetLeft<iTarget) {
                speed = 7;
            }else {
                speed = -7;
            }

            if (Math.abs(iTarget-oDiv.offsetLeft)<=7) {
                clearInterval(timer);
                oDiv.style.left = iTarget + 'px';
            } else {
                oDiv.style.left = oDiv.offsetLeft + speed + 'px';
            }
        },30);
    }
</script>
</head>
<body>
    <input id="btn1" type="button" value="到100" onclick="startMove(100)"; />
    <input id="btn1" type="button" value="到300" onclick="startMove(300)"; />
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>