原生JS实现弹性运动中需要注意的弊端

越陌度阡

发布于 2020-11-26 14:48:19

8380

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

在使用弹性运动时，需要注意一些小问题，即运动的元素所要改变的属性值不能太小，如果太小在反弹时就会出现负值，导致出现错误，所以要给出一定的限制，下面写一个小Demo，欢迎大家复制粘贴及吐槽。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现弹性运动中需要注意的弊端</title>
    <style>
        #div1 {
            width: 100px;
            height: 30px;
            background: red;
        }
    </style>

    <script>
        window.onload = function () {

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

            oDiv.onmouseover = function () {

                startMove(oDiv, 200);
            };

            oDiv.onmouseout = function () {

                startMove(oDiv, 40);
            };
        };

        var iSpeed = 0;
        var height = 40;

        function startMove(obj, iTarget) {

            clearInterval(obj.timer);

            obj.timer = setInterval(function () {

                iSpeed += (iTarget - height) / 5;
                iSpeed *= 0.7;

                if (Math.abs(iSpeed) < 1 && Math.abs(iTarget - height) < 1) {

                    clearInterval(obj.timer);

                    obj.style.height = iTarget + 'px';

                } else {
                    height += iSpeed;

                    //弹性运动过程中，反弹时可能导致高度为0,出现报错，所以要限制
                    if (height < 0) {

                        height = 0;
                    }
                    //当高度太小，即便限制，实际效果也会有些卡顿
                    obj.style.height = height + 'px';
                }
            }, 30);
        }
    </script>
</head>

<body>
    <div id="div1">
    </div>
</body>

</html>

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

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

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

原生JS实现弹性运动中需要注意的弊端

原生JS实现弹性运动中需要注意的弊端

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐