js的运动

最新推荐文章于 2022-11-16 19:39:03 发布

青木郎

最新推荐文章于 2022-11-16 19:39:03 发布

阅读量256

点赞数

分类专栏： Html5 文章标签： js 匀速运动变速运动

本文链接：https://blog.csdn.net/qingmulang/article/details/53201162

版权

Html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

匀速运动

简而言之就是使用定时器，让某一个物体以均匀地速度移动

function move(target) {
                var silderBar = document.getElementById("silderBar");

                clearInterval(timer);
                timer = setInterval(function() {
                    var speed = 0;
                    if(silderBar.offsetLeft > target) {
                        speed = -10;
                    } else {
                        speed = 10;
                    }
                    if(silderBar.offsetLeft == target) {
                        clearInterval(timer);
                    } else {
                        silderBar.style.left = silderBar.offsetLeft + speed + 'px';
                    }
                }, 30);
            };

变速运动

让物体运动的速度和到达目标位置的距离成正比，即与目标位置的距离越短，则速度越小（减速运动）或者越大（加速运动）

    function decelerateMove(target) {
                var silderBar = document.getElementById("silderBar2");

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

                    if(silderBar.offsetLeft > target) {
                        var dLength = target - silderBar.offsetLeft;
                        speed = Math.floor(dLength / 10);
                    } else {
                        var dLength = target - silderBar.offsetLeft;
                        speed = Math.ceil(dLength / 20);
                    }
                    if(silderBar.offsetLeft == target) {
                        clearInterval(timer);
                    } else {
                        silderBar.style.left = silderBar.offsetLeft + speed + 'px';
                    }
                }, 30);
            };

这里用到Math的工具包，有两个函数 Math.floor（），向下取整。Math.ceil(），向上取整。

完整例子：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>侧边栏分享</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #line {
                width: 1px;
                height: 900px;
                background: black;
                position: absolute;
                left: 200px;
            }

            #silderBar {
                width: 200px;
                height: 300px;
                background: pink;
                position: absolute;
                left: -200px;
                top: 100px;
            }

            #silderBar2 {
                width: 200px;
                height: 300px;
                background: pink;
                position: absolute;
                left: -200px;
                top: 500px;
            }

            #shareText {
                width: 30px;
                height: 100px;
                background: red;
                line-height: 30px;
                position: absolute;
                text-align: center;
                vertical-align: middle;
                right: -30px;
                top: 100px;
            }

            #shareText2 {
                width: 30px;
                height: 100px;
                background: yellow;
                line-height: 30px;
                position: absolute;
                text-align: center;
                vertical-align: middle;
                right: -30px;
                top: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var silderBar = document.getElementById("silderBar");
                var silderBar2 = document.getElementById("silderBar2");
                silderBar.onmouseover = function() {
                    move(0);
                };
                silderBar.onmouseout = function() {
                    move(-200);
                }
                silderBar2.onmouseover = function() {
                    decelerateMove(0);
                };
                silderBar2.onmouseout = function() {
                    decelerateMove(-200);
                }
            };
            //多物体运动必须有有多个timer，否则会出现不可控的错误，各自有各自的额timer
            var timer = null;
            var decelerateTimer = null;

            function move(target) {
                var silderBar = document.getElementById("silderBar");

                clearInterval(timer);
                timer = setInterval(function() {
                    var speed = 0;
                    if(silderBar.offsetLeft > target) {
                        speed = -10;
                    } else {
                        speed = 10;
                    }
                    if(silderBar.offsetLeft == target) {
                        clearInterval(timer);
                    } else {
                        silderBar.style.left = silderBar.offsetLeft + speed + 'px';
                    }
                }, 30);
            };

            function decelerateMove(target) {
                var silderBar = document.getElementById("silderBar2");
                var iPosition = document.getElementById("position");

                clearInterval(decelerateTimer);
                decelerateTimer = setInterval(function() {
                    var speed = 0;

                    if(silderBar.offsetLeft > target) {
                        var dLength = target - silderBar.offsetLeft;
                        speed = Math.floor(dLength / 10);
                        iPosition.value = speed + "***" + silderBar.offsetLeft + "***" + target;
                    } else {
                        var dLength = target - silderBar.offsetLeft;
                        speed = Math.ceil(dLength / 20);
                    }
                    if(silderBar.offsetLeft == target) {
                        clearInterval(decelerateTimer);
                    } else {
                        silderBar.style.left = silderBar.offsetLeft + speed + 'px';
                    }
                }, 30);
            };
        </script>
    </head>

    <body>
        <div id="line">
            <input type="text" value="adsa" id="position" />
        </div>
        <div id="silderBar">
            匀速弹出
            <span id="shareText">
                分享到
            </span>
        </div>
        <div id="silderBar2">
            减速弹出
            <span id="shareText2">
                分享到
            </span>
        </div>
    </body>

</html>

青木郎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的运动

匀速运动简而言之就是使用定时器，让某一个物体以均匀地速度移动function move(target) { var silderBar = document.getElementById("silderBar"); clearInterval(timer); timer = setInterval(func
复制链接

扫一扫

专栏目录