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

最新推荐文章于 2021-09-22 10:01:12 发布

我想要那只猫

最新推荐文章于 2021-09-22 10:01:12 发布

阅读量176

点赞数

分类专栏： js心得

本文链接：https://blog.csdn.net/weixin_42238089/article/details/89283699

版权

js心得专栏收录该内容

10 篇文章 0 订阅

订阅专栏

注意由于需要使用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>

我想要那只猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成一个(width)往复运动的模板

注意由于需要使用for循环去遍历div所以初始计时器的设定类似于给div添加一个属性在后期的传参内也需要注意这一点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <styl...
复制链接

扫一扫