其他分享
首页 > 其他分享> > (day05—06)获得鼠标的坐标

(day05—06)获得鼠标的坐标

作者:互联网

<!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>

标签:06,鼠标,top,offsetX,offsetY,pop,day05,var
来源: https://blog.csdn.net/qq_43459224/article/details/90083412