本文介绍了一种使用HTML、CSS和JavaScript实现鼠标拖动DIV元素的技术。通过设置DIV的绝对定位和监听鼠标移动事件，使DIV能跟随鼠标移动。代码中详细展示了如何捕捉鼠标位置并调整DIV的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动而移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//获取元素
var ball = document.getElementById('ball');
console.log(ball);
//将鼠标的移动事件交给外部更大的容器window,以保证鼠标不丢失
/*ball.onmousemove = function(e){}*/
window.onmousemove = function(e){
var e = e || window.event;
var newLeft = e.clientX - ball.offsetWidth / 2;
var newTop = e.clientY - ball.offsetHeight / 2;
ball.style.left = newLeft + 'px';
ball.style.top = newTop + 'px';
}
</script>
</html>
扫一扫
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
