设置一个30个以上的div(长10px,宽10px),要求后一个div跟着前一个走,第1个div跟着鼠标走。
时间: 2024-03-23 13:39:20 浏览: 33
可以使用JavaScript来实现这个要求,先在HTML中创建一个容器div,然后使用JavaScript动态创建30个子div,并添加相应的样式和事件监听器,代码如下:
HTML:
```
<div id="container"></div>
```
JavaScript:
```
// 获取容器div
var container = document.getElementById("container");
// 创建30个子div
for (var i = 0; i < 30; i++) {
var div = document.createElement("div");
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "black";
div.style.position = "absolute";
div.style.left = i * 10 + "px";
container.appendChild(div);
// 第1个div跟着鼠标移动
if (i == 0) {
div.addEventListener("mousemove", function(event) {
this.style.left = event.clientX + "px";
this.style.top = event.clientY + "px";
});
} else {
// 后面的div跟着前一个div移动
div.style.top = "0px";
div.style.left = (i - 1) * 10 + "px";
div.prevLeft = div.style.left;
div.move = function() {
this.style.left = this.prevLeft;
this.prevLeft = this.previousSibling.style.left;
};
}
}
// 每隔10毫秒让后面的div跟着前一个div移动
setInterval(function() {
for (var i = 1; i < 30; i++) {
var div = container.children[i];
div.move();
}
}, 10);
```
运行以上代码,就可以实现30个以上的div,其中第1个div跟着鼠标移动,后面的div跟着前一个div移动。