转载文章
稍作修改 坐标无误差
<HEAD>
<TITLE> JS获取DIV相对坐标</TITLE>
<script type="text/javascript">
function getX(obj){
var parObj=obj;
var left=obj.offsetLeft;
while(parObj=parObj.offsetParent){
left+=parObj.offsetLeft;
}
return left;
}
function getY(obj){
var parObj=obj;
var top=obj.offsetTop;
while(parObj = parObj.offsetParent){
top+=parObj.offsetTop;
}
return top;
}
function DisplayCoord(event){
var top,left,oDiv;
oDiv=document.getElementById("demo");
top=getY(oDiv);
left=getX(oDiv);
document.getElementById("mp_x").innerHTML = (event.clientX-left+document.body.scrollLeft) +"px";
document.getElementById("mp_y").innerHTML = (event.clientY-top+document.body.scrollTop) +"px";
}
</script>
</HEAD>
<BODY style="margin:40px;" mce_style="margin:40px;">
<div style="background-color:#000000;color:white;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)">
我是DIV,经测试,没有误差
</div>
当前鼠标坐标为：
X：<span id="mp_x"></span>
Y：<span id="mp_y"></span>
</body>
</BODY>
</HTML>
转载地址 ：http://blog.csdn.net/zm12037/article/details/4869670
分享到：
相关推荐
在JavaScript中，获取鼠标位置和计算鼠标与特定div元素的相对位置是常见的需求，这在交互式网页开发中尤其重要。下面将详细讲解如何实现这些功能。 首先，我们需要理解两个基本概念：`event.clientX` 和 `event....
标题所提到的“获取鼠标在div中的相对位置”就是一个这样的需求。下面我们将详细讲解这个实现过程以及相关的JavaScript技术。 首先，我们要明白，鼠标在屏幕上的绝对位置可以通过`event.clientX`和`event.clientY`...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素，特别是`div`元素位置的技术。在这个示例中，开发者可能想要创建一个交互式的用户界面，用户可以通过鼠标拖拽来调整`div`元素的顺序...
在了解如何使用JavaScript获取鼠标相对位置之前，首先需要了解一些基础概念。在浏览器中，事件对象（event）通常作为回调函数的参数被传入，其中event.clientX和event.clientY分别代表触发事件的鼠标指针相对于...
在提供的HTML文件"JS获取文本框光标位置、选中起始位置、终止位置、选择内容.html"中，应该包含了一个示例，演示了如何使用这些方法来实时显示选中区域的信息。你可以打开这个文件，通过实践来更好地理解和应用这些...
"JS 控制鼠标相对区域范围"这个话题主要涉及JavaScript事件处理、DOM操作以及坐标计算。以下是对这个主题的详细解释： 一、JavaScript事件处理 1. `addEventListener`: 这是JavaScript用于添加事件监听器的方法，...
本文将深入解析如何利用JQuery和原生JavaScript获取鼠标坐标，包括其工作原理、代码实现以及注意事项。 ### JQuery获取鼠标坐标 #### 工作原理 JQuery简化了原生JavaScript的操作，提供了强大的选择器和事件处理...
在Vue应用中，有时我们需要获取页面元素的相对位置，以便实现一些交互效果，如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置，并提供示例代码。 首先，`getBoundingClientRect()` 是...
从描述中还提到了绑定鼠标监听事件，即为div元素绑定一个鼠标按下的事件（mousedown），在该事件处理函数中获取鼠标按下的位置，并在之后移动鼠标的过程中，根据鼠标移动的位置动态改变div元素的位置。 接下来，...
鼠标在移入到td上面之后，在td的相对位置浮动出一个div，基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。
"js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括：JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**： - **变量与数据类型**：在实现拖拽功能时，我们需要声明并...
总结起来，通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点，可以让你在构建交互式Web应用时更加得心应手...
3. **坐标计算**：在`mousemove`事件处理函数中，我们需要计算鼠标的相对位置，以确定div的新位置。这涉及到获取鼠标的当前位置和div的初始位置，然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**：...
2. **计算相对位置(_x, _y)**：记录鼠标按下时，鼠标位置与div左上角的相对距离，这是通过`e.pageX`和`e.pageY`获取鼠标页面坐标，减去div的left和top样式值来实现的。 3. **透明度变化**：当鼠标按下时，div逐渐...
2. **获取元素位置**：在拖动过程中，我们需要知道div当前的位置以及鼠标的坐标。这可以通过`getBoundingClientRect()`方法获取元素的相对屏幕位置，以及`event.clientX`和`event.clientY`获取鼠标位置。 ```...
如果希望用户能拖动div边缘来改变大小，可以监听鼠标事件，计算鼠标的相对位置并更新尺寸： ```javascript var startX, startY; myDiv.addEventListener('mousedown', function(event) { startX = event.clientX;...
在`drop`事件中，我们根据拖动元素和目标元素的位置调整它们在DOM树中的相对位置，从而实现排序。 通过这样的实现，用户可以通过直接拖动div来改变它们的顺序，而页面会实时反映出这种变化。这种方式在各种场景下都...
"jQuery+blockDrag.js拖动div栅格布局代码"是一个实现此类功能的示例，它允许用户通过鼠标拖动来调整div元素的位置，并自动吸附到预定义的网格中，确保布局整洁且对齐。接下来，我们将深入探讨这个解决方案的核心...