JavaScript运动框架（三）：多物体任意值运动

最新推荐文章于 2020-05-11 11:24:28 发布

原创最新推荐文章于 2020-05-11 11:24:28 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #解决方案 #框架

前端同时被 2 个专栏收录

61 篇文章

订阅专栏

JavaScript运动框架

8 篇文章

订阅专栏

本文介绍了一种实现多个HTML元素各自进行独立缓动运动的方法，包括高度、宽度、字体大小及透明度的变化。通过封装getStyle函数来准确获取元素当前状态，并为每个元素设置独立的定时器确保运动的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面两篇都是单物体的运动，本文开始讲多物体的运动，比如多个div的各自不同的属性如宽，高，字体大小，透明度的缓冲运动变化。

从本文起，就不再使用offsetWdith,offsetHeight了等等，因为会出现问题，比如加个border，offsetWidth就会出现严重问题，参见我个人的博客JavaScript中offsetWidth的’bug’及其对策解决方案就是封装getStyle(obj, attr) 函数，用了获取运动中的当前值！

function getStyle(obj, name) {
    if(obj.currentStyle) {//IE
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

既然是各个物体各自运动，那么他们之间有些变量就不能共享，比如定时器，每个对象都应有自己的定时器，因为每次启动定时器的时候先要清除上一个定时器，这就导致如果第一个物体还在运动，就把鼠标移动到第二个物体，瞬间清除上个定时器，导致第一个物体的运动不能运动到目标值就停下

另外，物体运动的样式，基本上就两类：一类是大小也就是px为单位的属性，还有一类就是透明度！

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>运动框架(三)：多物体运动</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 10px;
            float: left;
            filter: alpha(opacity:100);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">fontSize Changed</div>
    <div id="div4">alpha</div>

    <script type="text/javascript">
        var doc = document;
        var oDiv1 = doc.getElementById('div1');
        oDiv1.onmouseover = function() {
            startMove(this, 'height', 300);
        };
        oDiv1.onmouseout = function() {
            startMove(this, 'height', 100);
        };

        var oDiv2 = doc.getElementById('div2');
        oDiv2.onmouseover = function() {
            startMove(this, 'width', 300);
        };
        oDiv2.onmouseout = function() {
            startMove(this, 'width', 100);
        };

        var oDiv3 = doc.getElementById('div3');
        oDiv3.onmouseover = function() {
            startMove(this, 'fontSize', 30);
        };
        oDiv3.onmouseout = function() {
            startMove(this, 'fontSize', 16);
        };

        var oDiv4 = doc.getElementById('div4');
        oDiv4.onmouseover = function() {
            startMove(this, 'opacity', 30);
        };
        oDiv4.onmouseout = function() {
            startMove(this, 'opacity', 100);
        };


        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, null)[attr];
            }
        }

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var cur = 0;
                if (attr === 'opacity') {
                    cur = parseFloat(getStyle(obj, attr)) * 100;
                } else {
                    cur = parseInt(getStyle(obj, attr));
                }
                var speed = (iTarget - cur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iTarget == cur) {
                    clearInterval(obj.timer);
                } else {
                    if (attr === 'opacity') {
                        cur += speed;
                        obj.style.filter = 'alpha(opacity:' + cur + ')';
                        obj.style.opacity = cur / 100;//FireFox && Chrome
                    } else {
                        cur += speed;
                        obj.style[attr] = cur + 'px';           
                    }

                }
            }, 30);
        }

    </script>
</body>
</html>

这里写图片描述