jquery中clientY，pageY和screenY的区别

最新推荐文章于 2023-11-17 01:55:00 发布

啊哈前端

最新推荐文章于 2023-11-17 01:55:00 发布

阅读量1k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/wuzhe128520/article/details/49684751

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jquery获取坐标</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
	* {margin: 0;padding: 0;}
	div p {
		display: inline-block;box-sizing: border-box;
	}
</style>
</head>
<body style="height:1200px;">
<div style="width:100%;position: fixed;top: 0;background: #000;color: white;padding: 2px 20px;">
<p>鼠标当前的屏幕坐标是：<span class="showCoordinate">x:0,y:0</span></p>
<p>鼠标当前窗口客户区的坐标是：<span class="showCusCoord">x2:0,y2:0</span></p>
<p>鼠标在窗口页面中的坐标是：<span class="showPageCoord">x3:0,y3:0</span></p>
</div>
	<script src="../jquery1.js"></script>
	<script>
	$(document).ready(function(){
		$(document).mousemove(function(e){
			//获取鼠标在屏幕上的坐标
			x=e.screenX;//屏幕的左上角为参考点
			y=e.screenY;//获取屏幕的x和y坐标
			$(".showCoordinate").text("screenX:"+x+",screenY:"+y);
			//获取鼠标在当前窗口区域中的坐标
			x2=e.clientX;
			y2=e.clientY;
			$(".showCusCoord").text("clientX:"+x2+",clientY:"+y2);
			//返回事件被触发时鼠标指针相对于文档左边缘的位置
			x3=e.pageX;
			y3=e.pageY;(会随着滚动条的变化而变化)
			$(".showPageCoord").text("pageX:"+x3+",pageY:"+y3);
			
		});
	});    
	</script>
</body>
</html>
<span style="color:#FF0000;">screenX,screenY是距离屏幕边缘的距离
<img src="https://img-blog.csdn.net/20151106163315008?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
clientX,clientY是距离当前可是窗口的距离
<img src="https://img-blog.csdn.net/20151106163337404?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
pageX,pageY是相对于当前页面中的坐标（会随着滚动条的滚动而变化）
<img src="https://img-blog.csdn.net/20151106163526445?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
</span></span>

啊哈前端

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery中clientY，pageY和screenY的区别

jquery获取坐标 * {margin: 0;padding: 0;} div p { display: inline-block;box-sizing: border-box; }鼠标当前的屏幕坐标是：x:0,y:0鼠标当前窗口客户区的坐标是：x2:0,y2:0鼠标在窗口页面中的坐标是：x3:0,y3:0 $(document).ready(func
复制链接

扫一扫