原生JS实现各种运动之弹性运动

越陌度阡

发布于 2020-11-26 15:28:03

1.7K0

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

给大家分享一个用原生JS实现的弹性运动，效果如下：

以下是代码实现，欢迎大家复制粘贴及吐槽。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现各种运动之弹性运动</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50px;
            left: 0;
        }

        #div2 {
            position: absolute;
            width: 1px;
            height: 300px;
            left: 300px;
            top: 0;
            background: black;
        }
    </style>
    <script>

        var iSpeed = 0;
        function startMove() {
            var oDiv = document.getElementById('div1');
            setInterval(function () {

                iSpeed += (300 - oDiv.offsetLeft) / 5;

                iSpeed *= 0.7;

                oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
            }, 30);
        }
    </script>
</head>

<body>
    <input type="button" value="开始运动" onclick="startMove()" />
    <div id="div1"></div>
    <div id="div2"></div>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除

原生JS实现各种运动之弹性运动

原生JS实现各种运动之弹性运动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐