在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。
分别用的方法名称为screenX和screenY，clientX和clientY，pageX和pageY。
属性说明
-
clientX/clientY
名称 说明 返回 clientX 返回事件触发时鼠标相对于元素视口 的X坐标 数值 clientY 返回事件触发时鼠标相对于元素视口 的Y坐标 数值 这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时，滚动鼠标滚动条，坐标会随着鼠标滚动条的改变而改变。
-
screenX/screenY
名称 说明 返回 screenX 返回事件触发时鼠标相对于屏幕 的X坐标 数值 screenY 返回事件触发时鼠标相对于屏幕 的Y坐标 数值 顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。
-
pageX/pageY
名称 说明 返回 pageX 返回事件触发时鼠标相对于文档 的X坐标 数值 pageY 返回事件触发时鼠标相对于文档 的Y坐标 数值 如果鼠标停留在网页中的某个位置，滚动鼠标滚动条，pageY不会因为鼠标滚动的滚动而改变。
- 参考代码如下
-
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document).mousemove(function(e) { getScreenCoordinates(e);//获取鼠标在屏幕中的坐标 getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标，会随着滚动条的滚动而变化 getPageCoordinates(e);//获取鼠标当前页面区域中的坐标，不会随滚动条滚动而变化 }); function getScreenCoordinates(e) { x1 = e.screenX; y1 = e.screenY; $(".sp1").text("X1:" + x1 + ",Y1:" + y1); } function getClientCoordinates(e) { x2 = e.clientX; y2 = e.clientY; $(".sp2").text("X2:" + x2 + ",Y2:" + y2); } function getPageCoordinates(e) { x3 = e.pageX; y3 = e.pageY; $(".sp3").text("X3:" + x3 + ",Y3:" + y3); } }); </script> </head> <body> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p> 鼠标当前屏幕的坐标为：<span class="sp1"></span> </p> <p> 鼠标当前窗口客户区坐标为：<span class="sp2"></span> </p> <p> 鼠标当前页面区域中的坐标为：<span class="sp3"></span> </p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </body> </html>
相关推荐
js与jquery中获取当前鼠标的x、y坐标位置的代码.docx
1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画...
原理：最起考虑的原理是，两张图片，一张小图，一张大图，先获取鼠标在小图上面的坐标，然后以一个div来显示大图，并根据小图的坐标乘以大图除以小图得到的倍数定位！开始是把大图设为平铺不重复北景，然后使用背景...
当鼠标划过图形时，Highstock 可以将数据点或数据列的信息展示在提示框中，并且提示框会跟随用户的鼠标；我们做了大量工作，可以智能的显示离鼠标最近的点或被遮盖点的信息。 datetime时间轴 Highstock 对时间轴的...
内容索引:脚本资源,jQuery,电子报,锚点 使用jQuery 实现在线看报，鼠标移到电子报或电子杂志的某个区域后，会出现一个红色的边框以示选中，并显示出此区域的提示内容，点击后则开始加载报纸内容。原理解析：我们...
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...
像坐标控制、旋转矩阵、定时器、生成图像、数据初始化、矩阵乘法、坐标旋转、判断是否是顺时针方向排列、鼠标按下、放开时的动作等，都可在本源码中得以体现。 Java编写的显示器显示模式检测程序 2个目标文件 内容...