event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
一般用event.clientX 和event.clientY的比较多！
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();
//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}
}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){
var oldvalue = bijiao(obj.name)
if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
my_tips.style.left=event.clientX+120+document.body.scrollLeft;
my_tips.style.top=document.body.scrollTop+event.clientY
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>
<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
例子2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script type="text/javascript">
function bijiao(name){
var json = {'username' : 'aa', 'password' : 'bb','age':'5'};
var json1 = {'username' : 'aa1', 'password' : 'bb','age':'6'};
var map = new Array();
//for(var i=0;i<json.length;i++){
for(var key in json){
//alert(key+':'+json[key]);
for(var key1 in json1){
if(name == key){
if(key == key1){
if(json[key] == json1[key1]){
//alert(key+"===" + key1+ "属性值相同");
return "";
}else{
//alert(key+"===" + key1+ "属性值不同");
return json1[key1];
}
}}
}
}
//}
}
//alert(json.username);
//map.put();
function aa(obj,flag,iwidth){
var top = obj.offsetTop;
var left = obj.offsetLeft;
var objWidth = obj.offsetWidth;
var objHeight = obj.offsetHeight;
var oldvalue = bijiao(obj.name)
if( oldvalue!= ''){
var my_tips=document.all.mytips;
//var my_tips = document.getElementById("myadiv");
my_tips.innerHTML = oldvalue;
my_tips.style.display="";
my_tips.style.width=iwidth;
//my_tips.style.left=event.clientX+120+document.body.scrollLeft;
//my_tips.style.top=document.body.scrollTop+event.clientY -26
my_tips.style.left = left + objWidth;
my_tips.style.top=top;
if(!flag){
my_tips.style.display="none";
}
}else{
}
}
</script>
<BODY>
<form>
<div style="width: 999px; height: auto; border-left: solid 1px #bae1f8; border-right: solid 1px #bae1f8;
overflow: hidden;">
<!--不能去掉-->
<div class="patentindex" id="mytips" style="border-right: gray 1px solid; border-top: gray 1px solid;
display: none; filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
left: 0px; border-left: gray 1px solid; border-bottom: gray 1px solid; position: absolute;
background-color: #ffffff; text-align: left;">
<!---->
</div>
用户名：<input type="text" id="username" name="username" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/><br>
密码：<input type="text" id="password" name="password" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/></br>
年龄：<input type="text" id="age" name="age" onmousemove="aa(this,1,200)" onmouseout="aa(this,0,200)"/>
</form>
</BODY>
</HTML>
分享到：
相关推荐
js获得坐标.htm
JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...
在IT领域，尤其是在网页开发中，我们经常需要获取并处理用户的交互信息，其中之一就是鼠标坐标。...通过阅读说明和分析代码，开发者不仅可以学会如何显示鼠标坐标，还能深入理解JavaScript的基本原理和DOM操作。
开发者通过编程语言如C++, Python, JavaScript等，可以监听鼠标的移动事件，每当鼠标移动时，系统都会触发相应的事件，并提供当前的鼠标坐标。这个过程对于实现例如绘图软件中的画笔跟随、游戏中的玩家视角控制等...
js javascript 鼠标 坐标 移动速度 方向 角度
这里，我们首先通过`getBoundingClientRect()`获取目标元素的大小和位置，然后从鼠标坐标中减去元素的位置，得到相对于元素的坐标。 ### 补充知识点 - `event`对象：在JavaScript事件处理函数中，浏览器自动传递的...
本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标，包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作，提供了强大的选择器和事件处理...
描述中提到"自己制作控件实现网页获取窗体外鼠标坐标"，这可能是指在全屏模式下，通过JavaScript或者其他前端技术来监听鼠标移动事件，并计算出即使鼠标离开当前窗口，也能获取到其在屏幕上的绝对位置。"这只是个...
在IT领域，获取鼠标坐标是一项基础且重要的任务，特别是在开发图形用户界面（GUI）应用程序时。这个名为"取得鼠标坐标.rar"的压缩包文件似乎包含了一个执行程序，用于展示或帮助开发者理解如何在编程中获取鼠标的...
### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标，并实时显示这些坐标值。该功能主要涉及到以下几个知识点： 1. **事件监听器...
获取鼠标的坐标，通过js任意获取鼠标点击处的位置坐标。
通过以上介绍，你应该已经掌握了如何使用 JavaScript 获取并显示鼠标坐标的基本方法。这只是一个基础的示例，实际上你可以根据需求扩展，例如添加动态效果或者与其他交互功能结合，提升用户体验。希望这个知识能对你...
本项目所介绍的就是一种这样的技术——“跟随鼠标移动的十字坐标显示”。这个小功能可以在用户鼠标在页面上移动时，实时地显示一个十字架标记，指示出鼠标的当前位置，给人一种酷炫且个性化的视觉效果。 要实现这个...
本教程将深入探讨如何利用SuperMap iClient 6R for JavaScript库来实现一个功能，即当鼠标移动到地图上时，实时显示当前鼠标的地理坐标。SuperMap是一款强大的GIS软件，其iClient系列为开发者提供了丰富的JavaScript...
在Windows操作系统中，可以通过一些内置或第三方工具实现鼠标坐标的显示。例如，`mousexy.exe`可能就是一个这样的程序，它可以实时地在屏幕的某个角落或者状态栏显示鼠标的位置。用户运行这个程序后，无需其他操作，...
3. **计算2D坐标**：将得到的视口坐标转换为canvas的像素坐标。这一步需要考虑canvas的宽高和当前的视口大小。例如： ```javascript var xPixel = (vector3.x + 1) * canvas.width / 2; var yPixel = (-vector3.y...
本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下： 对于javascript获取当前鼠标坐标来说，得对不同浏览器的坐标位置有所了解。具体代码如下： 代码如下:<html> <...
在IT领域，显示鼠标坐标是一项基础但至关重要的功能，它广泛应用于各种软件开发、图形界面设计、游戏编程以及用户交互分析等场景。本压缩包文件“显示鼠标坐标.rar”很可能包含了一个程序或代码示例，用于实时显示...
4. **计算选区坐标**：当用户释放鼠标时，可以通过比较`mousedown`和`mouseup`时的坐标来计算选区的起点和终点，从而得到选区的宽高和中心点。 5. **图像比例**：如果图片不是原始尺寸显示，我们需要考虑图像的CSS...
开发者会使用到DirectX或OpenGL等图形库，这些库提供了获取鼠标坐标的方法，如OpenGL的`glutMouseFunc`或DirectX的`SetCursorPos`函数。同时，游戏引擎如Unity、Unreal Engine也内置了对鼠标坐标的处理，允许开发者...