原生JS实现一个简易的运动函数

越陌度阡

发布于 2022-11-27 17:39:46

1.1K0

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

给大家分享一个用原生JS实现的运动框架，并分别用改变高度、宽度、字体大小、边框、透明度来进行测试，欢迎大家复制粘贴及吐槽。

首先看一下效果：

以下是代码实现：

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>原生JS实现一个简易的运动函数</title>
        <style>
            div {
                width: 100px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 14px;
                margin-top: 50px;
                border: 2px solid black;
                background: red;
                opacity: 0.3;
                cursor: pointer;
            }
        </style>
    </head>

    <body>

        <div></div>
        <div></div>
        <div>点我</div>
        <div></div>
        <div></div>



        <script type="text/javascript">

            window.onload = function () {
                var list = document.getElementsByTagName('div');
                list[0].onclick = function () {
                    startMove(this, 'width', 300);
                };
                list[1].onclick = function () {
                    startMove(this, 'height', 200);
                };
                list[2].onclick = function () {
                    startMove(this, 'fontSize', 40);
                };
                list[3].onclick = function () {
                    startMove(this, 'borderWidth', 20);
                };
                list[4].onclick = function () {
                    startMove(this, 'opacity', 100);
                }
            };
            // 获取属性值
            function getStyle(obj, attr) {
                // 用两种不同的情况处理兼容
                if (obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            };

            // 运动方法
            function startMove(obj, attr, target) {
                // 防止连续点击出现多个定时器
                clearInterval(obj.timer);
                // 为当前对象添加定时器
                obj.timer = setInterval(function () {
                    var current = 0;
                    // 如果获取的属性值为透明度
                    if (attr == 'opacity') {
                        // 获取透明度值
                        current = parseInt(parseFloat(getStyle(obj, attr)) * 100);
                    } else {
                        // 获取其它属性值
                        current = parseInt(getStyle(obj, attr));
                    }
                    // 实现缓冲运动
                    var speed = (target - current) / 8;
                    // 将值取整，以免永远无法达到目标值
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    // 如果已经达到目标值
                    if (current == target) {
                        // 清除定时器
                        clearInterval(obj.timer);
                    } else {
                        // 如果属性为透明度
                        if (attr == 'opacity') {
                            // 为透明度赋值，分别处理兼容
                            obj.style.filter = 'alpha(opacity:' + (current + speed) + ')';
                            obj.style.opacity = (current + speed) / 100;
                        } else {
                            // 设置其它属性的值
                            obj.style[attr] = current + speed + 'px';
                        }
                    }
                }, 30)
            }
        </script>
    </body>

</html>

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

原始发表：2022-07-21，如有侵权请联系 cloudcommunity@tencent.com 删除

测试