JS实现多个Div,鼠标移入变宽 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 30px;
            background: red;
            margin: 10px;
        }
    </style>
    <script>
        window.onload = function() {
            var oDiv = document.getElementsByTagName('div'); //获取所有的div
            for (let i = 0; i < oDiv.length; i++) { //循环出所有的div
                oDiv[i].time = null; //给每个div加一个定时器。解决：单个定时器，出现的问题
                oDiv[i].onmouseover = function() {
                    starMove(this, 400);
                };
                oDiv[i].onmouseout = function() {
                    starMove(this, 100)
                }

            }
        }

        function starMove(obj, iTarget) {
            clearInterval(obj.time); //停止每个div的定时器
            obj.time = setInterval(function() {
                var speed = (iTarget - obj.offsetWidth) / 6; //div的运行速度
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度值的上下取整
                if (obj.offsetWidth == iTarget) { //判断div的宽度是否等于目标点
                    clearInterval(obj.time); //如果等于目标点就清除定时器
                } else {
                    //反之
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            }, 30)
        }
    </script>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

　　

posted @ 2020-10-10 10:20  YH丶浩  阅读(201)  评论(0)    收藏  举报