<!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>
<body onmouseMove="getXY(event)">
<script language="JavaScript">
<!--
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}
function getXY(event)
{
var e = event || window.event;
var x = mouseX(e);
var y = mouseY(e);
document.getElementById("XY").innerHTML = "X:" + x + "<br />Y:" + y;
}
function getX(elementID)
{
var el = elementID
return el.offsetLeft
}
function getY(elementID)
{
var el = elementID
return el.offsetTop
}
function getElementPositionX(elemID)
{
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
while(offsetTrail)
{
offsetLeft += offsetTrail.offsetLeft;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetLeft += document.body.leftMargin;
}
return offsetLeft;
}
function getElementPositionY(elemID)
{
var offsetTrail = document.getElementById(elemID);
var offsetTop = 0;
while(offsetTrail)
{
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetTop += document.body.topMargin;
}
return offsetTop;
}
function getElementPositionXY(elemID)
{
var offsetTrail = elemID;
var offsetLeft = 24;
var offsetTop =0;
while(offsetTrail)
{
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 &&
typeof(document.body.leftMargin) != "undefined") {
offsetLeft += document.body.leftMargin;
offsetLeft += document.body.leftMargin;
}
document.getElementById("txt_left").innerText = offsetLeft;
document.getElementById("txt_top").innerText = offsetTop;
document.getElementById("divMsg").style.top = offsetTop + "px";
}
//-->
</script>
鼠标的绝对位置：<br />
<span id="XY" style="color:red;"></span><br /><br />
控件输入框txtPos的绝对位置：<br />
X：<span id="txt_left" style="color:red;"></span><br />
Y：<span id="txt_top" style="color:red;"></span><br />
<input type="text" name="txtPos" id="txtPos" onfocus="getElementPositionXY(this)"/>
<br /><br />
<div id="divMsg" style="height:60px;width:100px;background-color:#cccccc"></div>
</body>
</html>
分享到：
相关推荐
在JavaScript中，获取鼠标的绝对位置是常见的需求，特别是在实现交互式用户界面或者进行鼠标跟踪时。`event`对象是JavaScript中的一个内置对象，它包含了有关当前事件（如鼠标点击或移动）的各种信息，其中包括鼠标...
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
本文将详细介绍如何在不同浏览器环境下通过JavaScript获取鼠标绝对位置的方法。 首先，我们需要了解不同浏览器对于鼠标事件对象(event object)中的位置属性的处理差异。在Internet Explorer（IE）中，`event.x` 和 ...
JavaScript获取鼠标坐标是Web开发中的常见需求，尤其在交互式应用和动态效果中扮演着重要角色。本篇文章将详细介绍各种JavaScript方法来获取鼠标位置，并解释它们的用途和差异。 首先，我们可以使用`event`对象来...
本文将详细介绍如何通过JavaScript来获取鼠标在页面上的位置，并解释代码背后的原理。 #### 核心知识点 1. **理解页面滚动与鼠标位置的关系** 2. **兼容性问题处理** 3. **实际应用案例** #### 实现方法 为了...
在Web开发中，JavaScript提供了`event.clientX`和`event.clientY`属性，可以在`mousemove`事件中获取鼠标位置。对于现代浏览器，还可以利用`navigator.getGamepads()`来获取游戏手柄的精确位置，这对于一些需要精确...
【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分，JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...
- `getPointerPosition()`：获取鼠标指针的绝对位置。 - `setOpacity()`：根据浏览器的不同设置透明度。 - `css()`：用于统一设置元素的CSS样式。 - `magnifier.init()`：初始化函数，设置放大镜的基本属性，如...
2. **获取鼠标位置**：通过`event`对象，我们可以获取到鼠标点击时的坐标信息，如`event.clientX`和`event.clientY`，这些信息将用于确定弹出层的位置。 3. **创建和操作DOM元素**：JavaScript提供了操作HTML文档...
描述中提到"自己制作控件实现网页获取窗体外鼠标坐标"，这可能是指在全屏模式下，通过JavaScript或者其他前端技术来监听鼠标移动事件，并计算出即使鼠标离开当前窗口，也能获取到其在屏幕上的绝对位置。"这只是个...
总结来说，实现JavaScript鼠标跟随效果的关键在于监听`mousemove`事件，获取鼠标的坐标，并实时更新元素的位置。通过结合CSS的`transition`属性，还可以提升用户体验，增加视觉效果。在实际应用中，可以根据需求调整...
2. **获取鼠标位置**：当`mousemove`事件触发时，`event`对象会携带有关事件的信息，包括鼠标的位置。我们可以使用`event.clientX`和`event.clientY`获取鼠标在页面上的水平和垂直坐标。 3. **设置图片位置**：获取...
通过监听鼠标的移动事件，JavaScript可以获取鼠标的位置，并在该位置附近创建或更新一个浮动的时钟元素。 实现鼠标时钟的关键技术包括： 1. **事件监听**：使用`addEventListener`方法监听鼠标的`mousemove`事件，...
2. **获取鼠标坐标**： 当 `mousemove` 事件被触发时，事件对象 `e` 包含了鼠标的坐标信息。`e.pageX` 和 `e.pageY` 分别表示鼠标在文档页面中的 X 和 Y 轴坐标。此外，还有其他属性如 `e.clientX` 和 `e.clientY`...
在JavaScript中，我们可以利用事件监听和DOM操作来实现一个跟随鼠标移动的盒子效果。这个例子主要涉及以下几个知识点： 1. **事件监听**： - `onmousedown`：鼠标按键被按下时触发的事件，用于初始化跟随操作。 -...
1. **事件处理**：JavaScript通过监听鼠标的移动事件（mousemove）来获取鼠标的当前位置。当鼠标移动时，事件处理器会触发，更新字符的位置。 2. **DOM操作**：动态效果需要对HTML文档对象模型（DOM）进行操作。...
2. **动态计算位置**：通过JavaScript获取鼠标位置，并结合元素大小和屏幕尺寸，计算出最佳的提示条显示位置。这可能需要用到`event.clientX`和`event.clientY`来获取鼠标的X和Y坐标。 3. **CSS样式控制**：定义...
总结起来，本项目的核心知识点包括：JavaScript事件监听、`mousemove`事件、获取鼠标位置`clientX`和`clientY`、动态修改CSS样式以及绝对定位。这些都是构建动态交互网页的基础技能，对于提升网页用户体验具有重要...