javascript DIV跟随鼠标移动
时间: 2023-08-14 15:06:39 浏览: 50
可以通过监听鼠标移动事件,来实现让DIV跟随鼠标移动的效果。具体实现方式如下:
1. 获取需要跟随鼠标移动的DIV元素。
2. 监听document对象的mousemove事件。
3. 在mousemove事件处理函数中,获取鼠标的坐标,并将DIV元素的left和top属性设置为鼠标的坐标。
下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Move Div with Mouse</title>
<style>
#moveDiv {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="moveDiv"></div>
<script>
var moveDiv = document.getElementById('moveDiv');
document.addEventListener('mousemove', function(event) {
moveDiv.style.left = event.clientX + 'px';
moveDiv.style.top = event.clientY + 'px';
});
</script>
</body>
</html>
```
这个示例中,我们监听了document对象的mousemove事件,并在事件处理函数中获取鼠标的坐标,并将DIV元素的left和top属性设置为鼠标的坐标,从而实现了DIV跟随鼠标移动的效果。