事件坐标

最新推荐文章于 2020-09-17 22:46:35 发布

weixin_33908217

最新推荐文章于 2020-09-17 22:46:35 发布

阅读量191

点赞数

原文链接：https://juejin.im/post/5a7168b85188256922635f94

版权

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

event.pageX、event.pageY

类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。

event.offsetX、event.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			body{overflow: hidden;}
			.box{
				width: 50px;
				height: 50px;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
			}
			img{
				width: 50px;
				height: 50px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box"><img src="https://avatars2.githubusercontent.com/u/28520144?imageView2/1/w/64/h/64/q/85/interlace/1"/></div>
	</body>
	<script>
		var box=document.getElementsByClassName('box')[0];
		var w=document.documentElement.clientWidth||document.body.clientWidth;
		var h=document.documentElement.clientHeight||document.body.clientHeight;
		box.style.left=(w-box.offsetWidth)/2+'px';
		box.style.top=(h-box.offsetHeight)/2+'px';
		var i=0;
		var x=0;
		var obox=[];
		var oImg=[];
		document.onmousemove=function(e){
			var e= e||window.event;
			var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
			var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
			var ex=e.pageX-scrollLeft||e.clientX;
			var ey=e.pageY-scrollTop||e.clientY;
			setTimeout(function(){
				box.style.left=ex-box.offsetWidth/2+'px';
				box.style.top=ey-box.offsetWidth/2+'px';
				console.log(obox.length)
			},100)
		}
		setInterval(function(){
			box.style.transform='rotate('+i+'deg)';
			i++;
		},1000/60);
		

	</script>
</html>
复制代码