设置一个30个以上的div(长10px,宽10px),要求后一个div跟着前一个走,第1个div跟着鼠标走。
时间: 2024-03-23 12:39:26 浏览: 10
好的,我来帮你解决这个问题。这里我提供一种使用jQuery实现的方法:
HTML:
```html
<div id="container"></div>
```
JavaScript:
```javascript
// 创建30个子div
for (var i = 0; i < 30; i++) {
var div = $("<div></div>");
div.css({
"width": "10px",
"height": "10px",
"background-color": "black",
"position": "absolute",
"left": i * 10 + "px"
});
$("#container").append(div);
// 第1个div跟着鼠标移动
if (i == 0) {
div.mousemove(function(e) {
$(this).css({
"left": e.pageX + "px",
"top": e.pageY + "px"
});
});
} else {
// 后面的div跟着前一个div移动
div.prevLeft = div.css("left");
div.move = function() {
this.css("left", this.prevLeft);
this.prevLeft = this.prev().css("left");
};
}
}
// 每隔10毫秒让后面的div跟着前一个div移动
setInterval(function() {
for (var i = 1; i < 30; i++) {
var div = $("#container > div").eq(i);
div.move();
}
}, 10);
```
这段代码中,我们先创建了一个空的容器div,然后使用jQuery动态创建30个子div,并添加相应的样式和事件监听器。第1个div跟着鼠标移动,后面的div跟着前一个div移动。我们使用一个prevLeft变量来记录前一个div的left值,然后在每次移动时更新它的left值。最后,我们使用setInterval函数每隔10毫秒让后面的div跟着前一个div移动。
希望这个方法可以帮到你。