目录
效果预览图
整体思路
完整代码
效果预览图
整体思路
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>
