利用javascript实现鼠标的按下抬起事件
案例:只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的。只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的。//获取鼠标在浏览器中的位置e.pageX, e.pageY。//2.给document注册鼠标移动事件。//改变图片的左定位。//改变图片的上定位。//设置鼠标抬起事件。
实现效果:
只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的
实现代码:
<!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>
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)