JS实现多物体运动

最新推荐文章于 2024-10-31 16:17:19 发布

李小毅&

最新推荐文章于 2024-10-31 16:17:19 发布

阅读量118

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq_45179355/article/details/125828082

版权

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 50px 0;
            width: 300px;
            height: 150px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
    // 1,获取事件源
    var divs = document.getElementsByTagName('div')
    // 2,给每个div绑定事件
    for (var i = 0;i<divs.length;i++){
        divs[i].onmouseover = function(){
            moves(this,600)
        }
        divs[i].onmouseout = function () {
            moves(this,300)
        }
    }
    var speed = 0,timer = null
    function moves(idName,endVal) {
        // 因为每个div上都设置了定时器，会产生冲突
        clearInterval(idName.timer)
        idName.timer = setInterval(function () {
            console.log(1111)
            // 设置速度:速度 =  （结束位置 - 初始位置）/定义的速度
            speed = (endVal - idName.offsetWidth) / 20
            // 速度判定:如果是加速:需要向上取整，反之向下取整
            speed =idName.offsetWidth < endVal ? Math.ceil(speed):Math.floor(speed)
            // 临界值判定
            if (idName.offsetWidth === endVal){
                clearInterval(idName.timer)
                return;
            }
            // 盒子的移动
            idName.style.width = idName.offsetWidth + speed +'px'
        },30)
    }
</script>
</body>
</html>