实现鼠标点击页面移动DIV可以通过JavaScript来完成，这需要监听鼠标的事件，在事件中获取鼠标的坐标位置，然后动态修改DIV元素的位置。下面是完整的实现攻略：
监听鼠标事件
通过addEventListener方法，可以为页面添加鼠标事件监听器，捕获鼠标事件并在事件处理程序中处理。下面是一个简单的示例代码：
document.addEventListener('mousemove', function(event) {
// 鼠标移动事件处理程序
});
获取鼠标的坐标位置
在鼠标移动事件处理程序中，可以通过event参数获取当前鼠标在页面中的坐标位置。clientX和clientY属性分别表示鼠标相对于浏览器窗口的X轴和Y轴坐标。示例如下：
document.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
// 处理鼠标位置
});
动态修改DIV元素位置
获取到鼠标位置后，可以使用DOM操作来动态修改DIV元素的位置。通过getElementById方法获取需要操作的元素，然后使用style属性来修改样式。示例如下：
document.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('myDiv');
div.style.left = x + 'px';
div.style.top = y + 'px';
});
完整的代码实现如下所示：
<!DOCTYPE html>
<html>
<head>
<title>移动DIV</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
document.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
var div = document.getElementById('myDiv');
div.style.left = x + 'px';
div.style.top = y + 'px';
});
</script>
</body>
</html>
以上就是使用JavaScript实现鼠标点击页面移动DIV的完整攻略和示例。另外，可以使用第三方库如jQuery来简化代码实现流程，也能够实现同样的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现鼠标点击页面 移动DIV - Python技术站
微信扫一扫 
支付宝扫一扫 