本文介绍了如何使用HTML和JavaScript实现在鼠标按住时图片跟随鼠标移动，鼠标抬起后停止跟随的效果。通过CSS定位和JavaScript事件处理（如`onmousedown`、`onmousemove`和`onmouseup`）来实现这一功能。
实现效果:
只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="./tu.gif" alt="" width="300" />
</body>
<script>
/*
案例:只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的
*/
//1.获取图片
var img = document.querySelector('img');
// console.log(img);
//2.给document注册鼠标移动事件
document.onmousedown = function (e) {
document.onmousemove = function (e) {
// 获取鼠标在浏览器中的位置e.pageX, e.pageY
var x = e.pageX;
var y = e.pageY;
//改变图片的左定位
img.style.left =( x-150) + 'px';
//改变图片的上定位
img.style.top =( y-100) + 'px';
};
document.ondragstart = function (ev) {
ev.preventDefault();
};
document.ondragend = function (ev) {
ev.preventDefault();
};
}
//设置鼠标抬起事件
document.onmouseup = function () {
document.onmousemove = null;
}
</script>
</html>
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
