设置一个30个以上的div(长10px,宽10px),要求后一个div跟着前一个走,第1个div跟着鼠标走。
时间: 2024-02-18 09:05:17 浏览: 28
你可以使用JavaScript和CSS来实现这个功能。首先,我们需要创建一个包含30个div的父元素,每个子元素都是一个10x10像素的正方形,并使用CSS将它们堆叠在一起。然后,我们需要编写JavaScript代码来控制div的位置,并且在鼠标移动时更新第一个div的位置。这里是一个示例代码:
HTML代码:
```html
<div id="container">
<div class="square" id="square1"></div>
<div class="square" id="square2"></div>
<div class="square" id="square3"></div>
<!-- ... 其他27个div ... -->
<div class="square" id="square30"></div>
</div>
```
CSS代码:
```css
#container {
position: relative;
}
.square {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}
#square1 {
left: 0;
top: 0;
}
```
JavaScript代码:
```javascript
const container = document.getElementById('container');
const squares = document.querySelectorAll('.square');
const square1 = document.getElementById('square1');
let mouseX = 0;
let mouseY = 0;
container.addEventListener('mousemove', e => {
mouseX = e.clientX;
mouseY = e.clientY;
});
function moveSquares() {
let prevX = square1.offsetLeft;
let prevY = square1.offsetTop;
square1.style.left = mouseX + 'px';
square1.style.top = mouseY + 'px';
for (let i = 2; i <= squares.length; i++) {
const currentSquare = document.getElementById(`square${i}`);
const currentX = currentSquare.offsetLeft;
const currentY = currentSquare.offsetTop;
currentSquare.style.left = prevX + 'px';
currentSquare.style.top = prevY + 'px';
prevX = currentX;
prevY = currentY;
}
requestAnimationFrame(moveSquares);
}
requestAnimationFrame(moveSquares);
```
这段代码会监听鼠标移动事件,并且在每一帧更新所有div的位置,让它们跟随前一个div的位置移动,并且第一个div会跟随鼠标移动。你可以根据需要修改CSS和JavaScript代码的细节来达到你想要的效果。