JavaScript之减速运动的实现

cloudOnSkyline

于 2022-07-05 15:17:14 发布

阅读量341

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125619967

版权

案例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文主要介绍如何利用JS以及定位实现元素的减速运动。

1.案例目标

盒子向右进行减速移动，移至300px处即停止

2.核心思路

通过目标位置的值减去盒子距离屏幕左侧的距离，即可得到盒子每次移动前距离目标位置的值。每次盒子移动的距离都是所剩距离的十分之一，循环往复，直至到达目标位置。由于JS小数的计算存在精度问题，故需要进行取整操作。

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
            left: 0px;
            transition: left 0.5s;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script type="text/javascript">
        var box = document.querySelector('.box');
        linearMove(box, 300);

        function linearMove(obj, target) {
            var myInter = setInterval(function() {
                var offsetLeft = obj.offsetLeft;
                var num = (target - offsetLeft) / 10;
                num > 0 ? num = Math.ceil(num) : Math.floor(num);
                if (offsetLeft == target) {
                    clearInterval(myInter);
                } else {
                    obj.style.left = offsetLeft + num + 'px';
                }

            }, 1000)
        }
    </script>

</body>

</html>

效果如图：

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之减速运动的实现

本文主要介绍如何利用JS以及定位实现元素的减速运动。盒子向右进行减速移动，移至300px处即停止通过目标位置的值减去盒子距离屏幕左侧的距离，即可得到盒子每次移动前距离目标位置的值。每次盒子移动的距离都是所剩距离的十分之一，循环往复，直至到达目标位置。由于JS小数的计算存在精度问题，故需要进行取整操作。代码如下：效果如图：...
复制链接

扫一扫

专栏目录