转载文章
稍作修改 坐标无误差
<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元素的位置,并自动吸附到预定义的网格中,确保布局整洁且对齐。接下来,我们将深入探讨这个解决方案的核心...