（day05—06）获得鼠标的坐标

最新推荐文章于 2022-11-11 20:42:58 发布

avoidaily

最新推荐文章于 2022-11-11 20:42:58 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM

本文链接：https://blog.youkuaiyun.com/qq_43459224/article/details/90083412

DOM 专栏收录该内容

15 篇文章

订阅专栏

<!doctype html>
<html>
 <head>
	<meta charset="UTF-8">
	<title>在当前显示区范围内实现点不到的小方块</title>
	<style>
		div{position:fixed;width:100px;height:100px;
			background-image:url(images/xiaoxin.gif);
      background-size:100%;
		}
	</style>
	
 </head>
 <body>
	<div id="pop"></div>
  <script>
		pop.onclick=function(e){
			console.log(e.screenX,e.screenY);
			console.log(e.clientX,e.clientY);
			console.log(e.offsetX,e.offsetY);
		}
			//先定义开关：
			var canMove=false;//开始时暂时不可移动
			//定义变量保存拖拽开始时 鼠标在图片的相对偏移距离
			var offsetX,offsetY;
			//当鼠标在pop上按下时
			pop.onmousedown=function(e){
				canMove=true;//打开开关
				//当按下鼠标打开开关时，立刻记录在图片内的相对偏移距离
				offsetX=e.offsetX;
				offsetY=e.offsetY;
			}
			//当鼠标在窗口移动时
			window.onmousemove=function(e){
				//只有开关打开时
				if(canMove==true){
					//才同时改变pop的位置
					//先获得鼠标相对于文档显示区的坐标
					var left=e.clientX;
					var top=e.clientY;
					//再设置pop的left和top与鼠标的位置相同
					pop.style.left=left-offsetX+"px";
					pop.style.top=top-offsetY+"px";
				}
			}
			//当鼠标在pop上抬起时
			pop.onmouseup=function(){
				canMove=false;//关闭开关
			}
	</script>
 </body>
</html>