设置一个30个以上的div(长10px,宽10px),要求后一个div跟着前一个走,第1个div跟着鼠标走。
时间: 2024-03-23 20:39:09 浏览: 24
好的,你可以尝试以下代码实现该效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>Div跟随鼠标移动</title>
<style type="text/css">
.box {
position: absolute;
width: 10px;
height: 10px;
background-color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
// 创建30个div
for (var i = 0; i < 30; i++) {
var div = document.createElement('div');
div.className = 'box';
document.body.appendChild(div);
}
// 获取所有的div
var boxes = document.querySelectorAll('.box');
var firstBox = boxes[0];
// 绑定鼠标移动事件
document.addEventListener('mousemove', function(e) {
firstBox.style.left = e.clientX + 'px';
firstBox.style.top = e.clientY + 'px';
});
// 让后面的div跟着前面的div移动
for (var i = 1; i < boxes.length; i++) {
(function(index) {
var prevBox = boxes[index - 1];
var currBox = boxes[index];
var prevLeft = parseInt(prevBox.style.left);
var prevTop = parseInt(prevBox.style.top);
currBox.style.left = prevLeft + 'px';
currBox.style.top = prevTop + 'px';
})(i);
}
}
</script>
</body>
</html>
```
在这段代码中,首先我们创建了30个长宽为10px的div,并给它们添加了样式。然后我们获取了这些div,将第一个div绑定了鼠标移动事件,让它跟着鼠标移动。然后我们使用一个for循环,让后面的div跟着前面的div移动。