利用javascript实现鼠标的按下抬起事件
实现效果:
只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的

实现代码:
Document
img {
position: absolute;
}
/*
案例:只有在鼠标按住这个图片的时候,图片才跟随着鼠标移动,如果鼠标抬起了,鼠标移动,图片是不跟随移动的
*/
//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;
}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

