HTML+CSS+JS实现多物体运动

最新推荐文章于 2022-02-21 19:41:16 发布

qq_175****220

最新推荐文章于 2022-02-21 19:41:16 发布

阅读量918

点赞数 1

文章标签： HTML+CSS+JS实现多物体运动

本文链接：https://blog.csdn.net/qq_29656961/article/details/78443992

版权

1.box.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告</title>
    <link rel="stylesheet" type="text/css" href="box.css"/>
    <script src="box.js"></script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

</html>

2.box.css代码：

body {
    padding: 0px;
    margin: 0px;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    width: 200px;
    height: 100px;
    margin: 10px 0px;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
    background-color: pink;
}

3.box.js代码：

window.onload = function () {
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].timer = null;
        lis[i].onmouseover = function () {
            move(this, 400);
        }
        lis[i].onmouseout = function () {
            move(this, 200);
        }
    }
}

function move(object, target) {
    clearInterval(object.timer);
    object.timer = setInterval(function () {
        var speed = (target - object.offsetWidth) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (object.offsetWidth == target) {
            clearInterval(object.timer);
        } else {
            object.style.width = object.offsetWidth + speed + 'px';
        }
    }, 30)
}

qq_175****220

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS实现多物体运动

1.box.html代码：广告 2.box.css代码：body { padding: 0px; margin: 0px;}ul { list-style: none; padding: 0px; margin: 0px;}ul li {
复制链接

扫一扫