在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。
分别用的方法名称为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>
相关推荐
在IT领域，特别是前端开发中，获取鼠标坐标是一项基本但重要的功能，它广泛应用于各种交互设计、游戏开发、数据采集等场景。通过JQuery或原生JavaScript，开发者可以轻松实现这一功能，为用户提供更加丰富和动态的...
在网页开发过程中，经常需要获取页面元素的坐标位置，以便实现特定的功能，如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动...
总之，jQuery.imgAreaSelect-0.9.2提供了一种高效、灵活的图像选区解决方案，其强大的功能和简洁的API使得在网页中实现图像选取功能变得轻松简单。无论是用于图片裁剪、定位还是其他图像相关的交互设计，都能满足...
2. **坐标计算**：在鼠标移动事件触发后，插件获取鼠标的当前位置（x，y坐标），然后根据预设的偏移值和图片尺寸，计算出图片的新位置。 3. **图片定位**：利用CSS的`position: absolute`属性，动态设置图片的`left`...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。"jquery实现的鼠标拖拽改变块坐标"是一个典型的交互式网页特效，允许用户通过鼠标拖动来调整元素的位置，从而...
在JavaScript和jQuery中，...### jQuery 获取鼠标坐标 jQuery提供了一个更简洁的方式来处理事件，同时获取坐标值。以下是如何在jQuery中实现相同功能的代码： ```html <!DOCTYPE html> <title>jQuery 获取鼠标坐标 ...
**jQuery Jcrop是一款非常实用的JavaScript图片裁剪工具，它为网页开发人员提供了一种简单易用的方法来实现用户交互式的图像裁剪功能。在网页上，用户可以自由选择图片的裁剪区域，从而实现自定义尺寸的图片生成。**...
JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...
jQuery Cropper是一款强大的图片裁剪与标注插件，它结合了jQuery库和coorp.js模块，使得在网页上实现图片标注和获取标注信息变得简单易行。本文将深入探讨这个插件的使用方法、功能特性以及如何获取标注的区域坐标和...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理和动画效果等方面。标题提到的“jquery 鼠标放上去后出现的提示效果”是一种常见的用户...
在IT领域，获取鼠标坐标是一项基础且重要的技能，特别是在开发交互式用户界面或者进行图形编程时。这篇博客“获取鼠标坐标”可能详细介绍了如何在不同的编程环境和框架中捕获和处理鼠标的实时位置信息。虽然没有提供...
6. **事件监听和响应**：在jQuery中，可以使用`.on()`方法监听用户的鼠标移动、点击等事件，根据坐标更新全景图的显示角度和放大级别。 7. **CSS3和Transforms**：为了实现平滑的旋转和缩放效果，可以结合使用CSS3...
"jquery坐标图片框裁剪"是一种技术，它允许用户在网页上自由选择图片的特定区域进行裁剪，通过坐标系统精确地定义裁剪范围。这种功能通常用于头像上传、产品图片定制或者其他需要用户自定义裁剪的场景。 jQuery是一...
在本实例中，jQuery被用来创建一种与游戏“梦幻西游”类似的鼠标指针移动特效，使用户在浏览网页时感受到更丰富的视觉体验。 特效的核心在于对鼠标移动事件的监听和处理。jQuery提供`mousemove`事件，当鼠标在页面...
在JavaScript的世界里，jQuery库以其简洁的API和强大的功能，成为了网页开发中广泛使用的工具。本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动"，这是一个能够提升用户交互体验的创新设计。这个特效...
在IT行业中，jQuery和HTML5是两种非常重要的技术，它们在网页开发中有着广泛的应用。当我们谈论"Jquery+h5绘制地图"时，这通常是指使用这两种技术来创建交互式的、动态的地图展示。下面我们将详细探讨这个主题，包括...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本示例“jQuery鼠标右键点击显示菜单”是基于jQuery-1.11.2.min.js版本实现的一个功能，...
在网页开发中，我们常常需要实现图片的裁剪功能，以便用户可以自由选择感兴趣的部分进行保存或处理。jQuery的imgAreaSelect插件为此提供了一个简单易用的解决方案。这篇文章将深入探讨imgAreaSelect插件的原理、使用...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互等任务。本资源"jQuery实现在网页任意位置点击鼠标右键弹出菜单特效源码.zip"提供了使用jQuery实现的一个...
jQuery Tooltip跟随鼠标提示条是一种常见的前端交互设计，用于在用户将鼠标悬停在特定元素上时，提供附加信息或指导。这种功能广泛应用于网站、应用和各种用户界面中，为用户提供方便的上下文帮助。 首先，jQuery是...