js案例：跟随鼠标移动的大虫子

本文链接：https://blog.csdn.net/qq_52799985/article/details/134394566

本文介绍了如何使用JavaScript和DOM操作，通过rang函数生成随机背景色，实现div元素的拖动效果以及其余元素的动画移动。通过mousedown、mousemove和mouseup事件，配合定时器控制元素位置变化。

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

效果预览图

整体思路

完整代码

效果预览图

整体思路

rang 函数用于生成指定范围内的随机整数。

通过循环，创建了50个div元素，每个div都有一个不同的数字和随机的背景颜色。

给每个div元素添加了名为 "ball" 的类名。

通过 document.querySelectorAll('.ball') 获取所有具有 "ball" 类名的元素，然后将它们存储在 divs 变量中。

给 divs 中的最后一个元素（第50个div）添加了 mousedown 事件处理程序。当鼠标按下时，获取鼠标相对于该div的偏移，并添加 mousemove 事件处理程序，以便在移动鼠标时更新该div的位置，从而实现拖动效果。

给 document 添加了 mouseup 事件处理程序。当鼠标抬起时，通过 setInterval 定时器，定期更新除了最后一个div之外的所有div的位置，实现了动画效果。同时，清除了之前设置的 mousemove 事件处理程序。

7.div元素跟随鼠标移动，而其余的div元素则以一定的速度向前移动，形成动画效果。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大虫子</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ball{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 50%;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            user-select: none;
        }
    </style>
</head>
<body>
    
</body>
</html>
<script>
    function rang(m,n){
        return Math.floor(Math.random()*(n-m+1)+m)
    }
    for (let i = 1; i <= 50; i++) {
        let div = document.createElement('div')
        div.innerHTML = i;
        document.body.appendChild(div);
        div.style.background = `rgb(${rang(0,255)},${rang(0,255)},${rang(0,255)})`;
        div.className = 'ball';
        
    }
    let divs = document.querySelectorAll('.ball')
    divs[49].onmousedown = function(){
        let diX = event.clientX - divs[49].offsetLeft;
        let diY = event.clientY - divs[49].offsetTop;
       document.onmousemove = function(){
        for (let i = 0; i < divs.length-1; i++) {
            divs[i].style.left = divs[i+1].style.left;
            divs[i].style.top = divs[i+1].style.top;
        }
        divs[49].style.left = event.clientX-diX+'px'
        divs[49].style.top = event.clientY-diY+'px'
       }
    }
    let timmer;
    document.onmouseup = function(){
        timmer = setInterval(function(){
            for (let i = 0; i < divs.length-1; i++) {
            divs[i].style.left = divs[i+1].style.left;
            divs[i].style.top = divs[i+1].style.top;
        }
        },50)
        
        document.onmousemove = null;
    }
</script>