JavaScript多物体运动及函数封装

最新推荐文章于 2022-07-15 08:29:13 发布

GY_U_YG

最新推荐文章于 2022-07-15 08:29:13 发布

阅读量476

点赞数

分类专栏：前端文章标签： javascript 函数

本文链接：https://blog.csdn.net/GY_U_YG/article/details/71698732

版权

前端专栏收录该内容

61 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GUOYU-多物体运动</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 60px;
            background: red;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>

    <script type="text/javascript">
        /*
            需求：鼠标移入div变大400，移出缩回原大小100;
            分析：3个div，三个定时器，每个div对象都给个属性timer，
                 如果像之前的单物体缓冲运动只要一个定时器，你移入第一个div，
                 第一个div就变宽了，这时快速移动到第二个div，那么第一个定时器就关了，
                 开启第二个定时器，导致的结果就是第一个div可能还没来得及缩回去
        */
        var aDiv = document.getElementsByTagName('div');
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].timer = null;

            aDiv[i].onmouseover = function() {
                startMove(this, 400);
            };
            aDiv[i].onmouseout = function() {
                startMove(this, 100);
            };
        }
        var timer = null;
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.offsetWidth) / 6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if (obj.offsetWidth == iTarget) {
                    clearInterval(timer);
                } else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            }, 30)
        }
    </script>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GUOYU-多物体运动</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
            float: left;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script type="text/javascript">
        /*
            需求：
                4个div，鼠标移动进去，变得不透明
        */
        var aDiv = document.getElementsByTagName('div');
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].alpha = 30;
            aDiv[i].onmouseover = function() {
                startMove(this, 100);
            };
            aDiv[i].onmouseout = function() {
                startMove(this, 30);
            }
        }
        //这个alpha有问题，4个div，不能共用一个alpha，否则乱套了
        //多物体运动，所有东西都不能框架
        //var alpha = 30;

        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var speed = (iTarget - obj.alpha) / 20;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iTarget == obj.alpha) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha += speed;
                    obj.style.filter = 'alpha(opacity:' + obj.alpha + ')';
                    obj.style.opacity = obj.alpha / 100;
                }
            }, 30);
        }
    </script>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>GUOYU-多物体运动</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
            float: left;
            filter: alpha(opacity:30);
            opacity: 0.3;
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">I have a dream</div>
    <div id="div4"></div>


    <script type="text/javascript">
        /*
            offsetWidth解析：
            width:200px;border:1px;padding:20px;
            offsetWidth ==> 222px;
            obj.style.width的width可比offsetWidth单纯多了，
            不管你border，padding怎么变，width不变的；
        */
        /*
            多物体运动，变量不能共享，比如定时器，各有各的定时器，
            比如属性，各有各的，要是共享就乱套了
        */
        var oDiv1 = document.getElementById('div1');
        oDiv1.onmouseover = function() {
            startMove(this, 'height', 400);
        };
        oDiv1.onmouseout = function() {
            startMove(this, 'height', 100);
        };

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

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

        var oDiv4 = document.getElementById('div4');
        oDiv4.onmouseover = function() {
            startMove(this, 'borderWidth', 40);
        };
        oDiv4.onmouseout = function() {
            startMove(this, 'borderWidth', 2);
        };
        function getStyle(obj, name) {
            if(obj.currentStyle) {//IE
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }
        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                //getStyle()得到的是“100px”，不是数字，所以要转化为数字
                var cur = parseInt(getStyle(obj, attr));
                var speed = (iTarget - cur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (cur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    cur += speed;
                    obj.style[attr] = cur + 'px';
                }
            }, 30);
        }
    </script>
</body>
</html>