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

2019-05-10 20:56:44 阅读：247 来源： 互联网

标签：06 鼠标 top offsetX offsetY pop day05 var

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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