`
gcq04552015
  • 浏览: 460823 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 获得鼠标的坐标

    博客分类：
  • Js
 
阅读更多
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>
分享到：
| 临时1111
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript获得鼠标坐标.htm

    js获得坐标.htm

    Javascript获取鼠标坐标的各种类型

    JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...

    显示鼠标坐标信息.rar

    在IT领域，尤其是在网页开发中，我们经常需要获取并处理用户的交互信息，其中之一就是鼠标坐标。...通过阅读说明和分析代码，开发者不仅可以学会如何显示鼠标坐标，还能深入理解JavaScript的基本原理和DOM操作。

    鼠标坐标跟踪限时运行

    开发者通过编程语言如C++, Python, JavaScript等，可以监听鼠标的移动事件，每当鼠标移动时，系统都会触发相应的事件，并提供当前的鼠标坐标。这个过程对于实现例如绘图软件中的画笔跟随、游戏中的玩家视角控制等...

    js鼠标识别器 javascript鼠标识别器坐标 移动速度 方向 角度

    js javascript 鼠标 坐标 移动速度 方向 角度

    javascript获得鼠标的坐标值

    这里，我们首先通过`getBoundingClientRect()`获取目标元素的大小和位置，然后从鼠标坐标中减去元素的位置，得到相对于元素的坐标。 ### 补充知识点 - `event`对象：在JavaScript事件处理函数中，浏览器自动传递的...

    JQuery获取鼠标坐标

    本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标，包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作，提供了强大的选择器和事件处理...

    网页实现全屏获取鼠标坐标

    描述中提到"自己制作控件实现网页获取窗体外鼠标坐标"，这可能是指在全屏模式下，通过JavaScript或者其他前端技术来监听鼠标移动事件，并计算出即使鼠标离开当前窗口，也能获取到其在屏幕上的绝对位置。"这只是个...

    鼠标显示坐标鼠标显示坐标

    在Windows操作系统中，可以通过一些内置或第三方工具实现鼠标坐标的显示。例如，`mousexy.exe`可能就是一个这样的程序，它可以实时地在屏幕的某个角落或者状态栏显示鼠标的位置。用户运行这个程序后，无需其他操作，...

    取得鼠标坐标.rar

    在IT领域，获取鼠标坐标是一项基础且重要的任务，特别是在开发图形用户界面（GUI）应用程序时。这个名为"取得鼠标坐标.rar"的压缩包文件似乎包含了一个执行程序，用于展示或帮助开发者理解如何在编程中获取鼠标的...

    javascript获取鼠标当前位置坐标并显示

    ### JavaScript 获取鼠标当前位置坐标并显示 #### 知识点概览 本文将详细介绍如何使用JavaScript来获取鼠标在页面上的当前位置坐标，并实时显示这些坐标值。该功能主要涉及到以下几个知识点： 1. **事件监听器...

    显示鼠标坐标信息 JavaScript代码

    通过以上介绍，你应该已经掌握了如何使用 JavaScript 获取并显示鼠标坐标的基本方法。这只是一个基础的示例，实际上你可以根据需求扩展，例如添加动态效果或者与其他交互功能结合，提升用户体验。希望这个知识能对你...

    跟随鼠标移动十字坐标显示,炫酷

    本项目所介绍的就是一种这样的技术——“跟随鼠标移动的十字坐标显示”。这个小功能可以在用户鼠标在页面上移动时，实时地显示一个十字架标记，指示出鼠标的当前位置，给人一种酷炫且个性化的视觉效果。 要实现这个...

    JavaScript实现鼠标移到地图上显示实际地理坐标

    本教程将深入探讨如何利用SuperMap iClient 6R for JavaScript库来实现一个功能，即当鼠标移动到地图上时，实时显示当前鼠标的地理坐标。SuperMap是一款强大的GIS软件，其iClient系列为开发者提供了丰富的JavaScript...

    three.js 3d坐标转平面坐标

    3. **计算2D坐标**：将得到的视口坐标转换为canvas的像素坐标。这一步需要考虑canvas的宽高和当前的视口大小。例如： ```javascript var xPixel = (vector3.x + 1) * canvas.width / 2; var yPixel = (-vector3.y...

    javascript获取当前鼠标坐标的方法

    本文实例讲述了javascript获取当前鼠标坐标的方法。分享给大家供大家参考。具体实现方法如下： 对于javascript获取当前鼠标坐标来说，得对不同浏览器的坐标位置有所了解。具体代码如下： 代码如下:&lt;html&gt; &lt...

    显示鼠标坐标.rar

    在IT领域，显示鼠标坐标是一项基础但至关重要的功能，它广泛应用于各种软件开发、图形界面设计、游戏编程以及用户交互分析等场景。本压缩包文件“显示鼠标坐标.rar”很可能包含了一个程序或代码示例，用于实时显示...

    任意获取鼠标点击处的位置坐标

    获取鼠标的坐标，通过js任意获取鼠标点击处的位置坐标。

    鼠标移动显示坐标点

    开发者会使用到DirectX或OpenGL等图形库，这些库提供了获取鼠标坐标的方法，如OpenGL的`glutMouseFunc`或DirectX的`SetCursorPos`函数。同时，游戏引擎如Unity、Unreal Engine也内置了对鼠标坐标的处理，允许开发者...

    pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_

    `pdfdemo2-master_pdf.js坐标点_加工_pdf关键字坐标获取_`这个项目就是针对这一需求而设计的，它利用了PDF.js库来实现PDF文档的关键字坐标获取功能。 PDF.js是Mozilla开发的一个开源JavaScript库，用于在Web浏览器...

Magicbox
Global site tag (gtag.js) - Google Analytics