生成一个(width)往复运动的模板

最新推荐文章于 2022-07-01 20:21:36 发布

原创最新推荐文章于 2022-07-01 20:21:36 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

js心得专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现的动态宽度调整动画，当鼠标悬停在div元素上时，div的宽度会平滑过渡到目标宽度。通过定时器和速度计算确保了动画的流畅性和精确性。

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

注意由于需要使用for循环去遍历div所以初始计时器的设定类似于给div添加一个属性
在后期的传参内也需要注意这一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: #78c430;
            margin-top: 40px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>

<script type = "text/javascript">
    var div = document.getElementsByTagName('div');

    for(var i = 0;i < div.length;i++){
        div[i].timer = null;
        div[i].onmouseover = function(){
            startMove(this,500);
        };
        div[i].onmouseout = function(){
            startMove(this,100);
        };
    }
    function startMove(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var speed = (target-obj.offsetWidth)/10;
            speed = speed>0?Math.ceil(speed) : Math.floor(speed);
            if(target == obj.offsetWidth){
                clearInterval(obj.timer);
            }else {
                obj.style.width = obj.offsetWidth+speed+'px';
            }
        },30)
    }
</script>
</body>

</html>