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

JS 获取DIV中 鼠标相对位置

阅读更多

转载文章

 

稍作修改 坐标无误差

 

 

<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的相对位置

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

    获取鼠标在div中的相对位置的实现代码

    标题所提到的“获取鼠标在div中的相对位置”就是一个这样的需求。下面我们将详细讲解这个实现过程以及相关的JavaScript技术。 首先,我们要明白,鼠标在屏幕上的绝对位置可以通过`event.clientX`和`event.clientY`...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能,并确保...

    JS DIV拖动交换位置DEMO

    标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素,特别是`div`元素位置的技术。在这个示例中,开发者可能想要创建一个交互式的用户界面,用户可以通过鼠标拖拽来调整`div`元素的顺序...

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

    在了解如何使用JavaScript获取鼠标相对位置之前,首先需要了解一些基础概念。在浏览器中,事件对象(event)通常作为回调函数的参数被传入,其中event.clientX和event.clientY分别代表触发事件的鼠标指针相对于...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    在提供的HTML文件"JS获取文本框光标位置、选中起始位置、终止位置、选择内容.html"中,应该包含了一个示例,演示了如何使用这些方法来实时显示选中区域的信息。你可以打开这个文件,通过实践来更好地理解和应用这些...

    JS 控制鼠标相对区域范围

    "JS 控制鼠标相对区域范围"这个话题主要涉及JavaScript事件处理、DOM操作以及坐标计算。以下是对这个主题的详细解释: 一、JavaScript事件处理 1. `addEventListener`: 这是JavaScript用于添加事件监听器的方法,...

    JQuery获取鼠标坐标

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

    Vue获取页面元素的相对位置的方法示例

    在Vue应用中,有时我们需要获取页面元素的相对位置,以便实现一些交互效果,如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置,并提供示例代码。 首先,`getBoundingClientRect()` 是...

    js拖动div 当鼠标移动时整个div也相应的移动

    从描述中还提到了绑定鼠标监听事件,即为div元素绑定一个鼠标按下的事件(mousedown),在该事件处理函数中获取鼠标按下的位置,并在之后移动鼠标的过程中,根据鼠标移动的位置动态改变div元素的位置。 接下来,...

    jQuery的mouseover操作div

    鼠标在移入到td上面之后,在td的相对位置浮动出一个div,基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。

    js可拖拽停靠吸附DIV

    "js可拖拽停靠吸附DIV"这个主题涉及的技术点主要包括:JavaScript基础、DOM操作、事件处理、CSS定位以及可能的自定义动画效果。 1. **JavaScript基础**: - **变量与数据类型**:在实现拖拽功能时,我们需要声明并...

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来,通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点,可以让你在构建交互式Web应用时更加得心应手...

    DIV可移动 可实现任意拖动放大缩小

    3. **坐标计算**:在`mousemove`事件处理函数中,我们需要计算鼠标的相对位置,以确定div的新位置。这涉及到获取鼠标的当前位置和div的初始位置,然后更新div的`style.left`和`style.top`属性。 4. **缩放功能**:...

    div拖拽效果

    2. **计算相对位置(_x, _y)**:记录鼠标按下时,鼠标位置与div左上角的相对距离,这是通过`e.pageX`和`e.pageY`获取鼠标页面坐标,减去div的left和top样式值来实现的。 3. **透明度变化**:当鼠标按下时,div逐渐...

    JavaScript可拖动DIV

    2. **获取元素位置**:在拖动过程中,我们需要知道div当前的位置以及鼠标的坐标。这可以通过`getBoundingClientRect()`方法获取元素的相对屏幕位置,以及`event.clientX`和`event.clientY`获取鼠标位置。 ```...

    纯js操作div移动 伸缩,支持快捷键

    如果希望用户能拖动div边缘来改变大小,可以监听鼠标事件,计算鼠标的相对位置并更新尺寸: ```javascript var startX, startY; myDiv.addEventListener('mousedown', function(event) { startX = event.clientX;...

    html 拖动div进行相应顺序的排序,亲测可用,简单方便

    在`drop`事件中,我们根据拖动元素和目标元素的位置调整它们在DOM树中的相对位置,从而实现排序。 通过这样的实现,用户可以通过直接拖动div来改变它们的顺序,而页面会实时反映出这种变化。这种方式在各种场景下都...

    jQuery+blockDrag.js拖动div栅格布局代码

    "jQuery+blockDrag.js拖动div栅格布局代码"是一个实现此类功能的示例,它允许用户通过鼠标拖动来调整div元素的位置,并自动吸附到预定义的网格中,确保布局整洁且对齐。接下来,我们将深入探讨这个解决方案的核心...

Global site tag (gtag.js) - Google Analytics