`
gudujianxuehu
  • 浏览: 97116 次
  • 来自: ...
社区版块
存档分类
最新评论

js实时获得鼠标位置

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>

<script>
function mouseMove(ev)
{
ev= ev || window.event;
  var mousePos = mouseCoords(ev);
  //alert(ev.pageX);
      document.getElementById('xxx').value = mousePos.x;
      document.getElementById('yyy').value = mousePos.y;
}

function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
   return {x:ev.pageX, y:ev.pageY};
}
return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop     - document.body.clientTop
};
}

document.onmousemove = mouseMove;
</script>
Mouse X Position:
<input id=xxx type=text>
<br>Mouse Y Position:
<input id=yyy type=text>




</body>
分享到:
评论

相关推荐

    JavaScript获取鼠标位置和鼠标与div的相对位置

    在JavaScript中,获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求,这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先,我们需要理解两个基本概念:`event.clientX` 和 `event....

    JS获得鼠标位置(兼容多浏览器ie,firefox)

    提供的压缩包文件`JS获得鼠标位置(兼容多浏览器ie,firefox).htm`可能包含了这个功能的示例代码,可以打开查看具体的实现。在实际应用中,确保对各种浏览器进行充分测试,以确保兼容性和准确性。

    javascript获得鼠标的坐标值

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

    js获取鼠标点击位置

    1. **定义**:`event.clientX` 和 `event.clientY` 是 JavaScript 事件对象中的属性,用于获取鼠标点击位置相对于视口(即浏览器窗口)的横纵坐标。 2. **局限性**:虽然这两个属性能够提供基本的位置信息,但它们...

    js实现鼠标拉框截图

    在JavaScript(简称JS)编程中,实现鼠标拉框截图是一项常见的功能,特别是在Web应用中,如在线编辑器、协作工具等。这个功能的核心是通过监听鼠标事件,结合HTML5的Canvas API来完成图像的选择和捕获。以下是实现这...

    js实现鼠标滚轮控制图片缩放效果的方法

    本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...

    获取鼠标相对位置

    至于`ImageSpliter.js`,它可能是一个用于分割图像的JavaScript工具,其中可能就用到了获取鼠标位置的功能。例如,用户可以通过拖动鼠标选择图像的一部分进行裁剪或分割。在这个场景下,获取鼠标相对位置就显得尤为...

    实时显示鼠标指针相对于浏览器X轴Y轴坐标位置

    一个很简单的javascript函数,当鼠标在页面上移动时不断的触发这个事件,然后将获得的X轴Y轴坐标位置实时赋值给其中的span标签 这样就可以实时显示当前坐标位置了 使用方法简单: 1、首先将附件中的函数...

    js鼠标事件大全js鼠标事件大全

    JavaScript(简称JS)鼠标事件是网页交互中常用的一类事件,它们允许开发者在用户与页面上的元素进行鼠标操作时执行特定的功能。以下是一些主要的JS鼠标事件及其详细解释: 1. onClick:当用户单击鼠标按钮并在同一...

    Javascript鼠标事件汇总

    3. **自定义提示**:通过`onMouseOver`和`onMouseOut`事件,可以根据鼠标位置显示提示信息或工具提示。 #### 五、注意事项 - 不同浏览器可能对某些事件的支持程度不同,因此在开发时应考虑浏览器兼容性问题。 - ...

    javascript网页与鼠标特效

    2. 鼠标跟随特效:通过监听`mousemove`事件,实时更新元素的位置,使其跟随鼠标移动。 3. 鼠标点击触发动画:结合CSS3的过渡和动画效果,以及JavaScript的`click`事件,可以在鼠标点击时启动元素的动画效果。 4. ...

    《用JavaScript得到鼠标指针的位置》(高清晰pdf版)

    为了向用户展示实时的鼠标位置信息,可以使用DOM操作来更新特定DOM元素的文本内容。通常会选择一个固定的区域来显示这些信息,比如使用`&lt;div&gt;`元素作为显示区域。 **示例代码**: ```html &lt;!-- 显示当前鼠标位置 --&gt;...

    JS获取鼠标相对位置的方法

    `m()`函数通过将鼠标位置信息更新到页面上的一个指定元素(id为"area"的div)的innerHTML中,来实现鼠标位置的实时显示。而`c()`函数则在元素被点击时,计算鼠标位置相对于该元素的位置,并通过alert()函数弹出显示...

    js实现鼠标点击文本框自动选中内容的方法

    标题中提及的"js实现鼠标点击文本框自动选中内容的方法"主要涉及到的是JavaScript编程语言中的两个概念:鼠标点击事件(onClick)和文本选择事件(select)。在Web开发中,页面上的文本框(input type="text")或者...

    获取鼠标在页面上的位置(包括滚动条)

    3. **计算鼠标在页面上的实际位置**:结合页面滚动量与鼠标在视口的位置,得到鼠标在页面上的位置。 #### 代码详解 ```javascript /** * 获取鼠标在页面上的位置 * @param ev 触发的事件 * @return {x: 鼠标在...

    获取鼠标在文档的坐标位置(兼容多浏览器)

    在不同的浏览器中,获取鼠标位置的方法可能会有所不同,因此编写一段能够跨浏览器运行的代码至关重要。 #### 二、基本原理 1. **事件对象**: 在JavaScript中,每当一个事件被触发,都会生成一个事件对象。这个对象...

    javascript鼠标事件大全

    ### JavaScript鼠标事件大全 在JavaScript编程中,鼠标事件是非常重要的交互元素之一,它们允许开发者捕捉用户的鼠标动作,并根据这些动作触发相应的脚本处理。本文将详细介绍JavaScript中的各种鼠标事件及其特性,...

    根据鼠标进入的位置加入遮罩

    本项目名为"SlipHover-master",旨在通过JavaScript和CSS技术实现这一功能,让用户在鼠标悬停时能动态地看到遮罩层,从而获得更多的上下文信息或者突出显示某个区域。 首先,我们要理解遮罩层的概念。遮罩层通常是...

    JS获取鼠标坐标位置实例分析

    在讨论JavaScript如何获取鼠标坐标位置时,首先应当了解鼠标事件对象中包含的坐标信息。鼠标事件对象在不同的浏览器中可能略有不同,但主要属性通常包括:clientX、clientY、pageX、pageY、screenX、screenY等。...

    JavaScript鼠标手势识别

    这个程序里边并没有训练方法,我只是把书中训练好的数据提取出来,直接输入到JavaScript写的神经网络里,这样一打开程序就能直接识别,否则还得训练,就现在javascript的执行效率,这不得到猴年马月去了!...

Global site tag (gtag.js) - Google Analytics