您的位置
主页 > 网站技术 > 语言编程 > » 正文

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

来源: 站长圈 点击:

如何获取鼠标在p中的相对位置,其实是很简单,下有个不错的示例,感兴趣的朋友可以参考下,希望对大家有所帮助!

复制代码 代码如下:

<HEAD> 

<TITLE> JS获取p相对坐标</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,op; 

op=document.getElementById("demo"); 

top=getY(op); 

left=getX(op); 

document.getElementById("mp_x").innerHTML = (event.clientX-left+document.documentElement.scrollLeft) -2+"px"; 

document.getElementById("mp_y").innerHTML = (event.clientY-top+document.documentElement.scrollTop) -2+"px"; 

// --></script> 

</HEAD> 

<BODY style="margin:40px;" mce_style="margin:40px;"> 

<p style="background-color:#000000;color:#0011FF;width:300px;height:300px;position:absolute;top:80px;left:90px;margin:0px; border:0px;" id="demo" onmousemove="DisplayCoord(event)"> 

我是p,经测试,有2PX的误差... 

</p> 

当前鼠标坐标为: 

X:<span id="mp_x"></span> 

Y:<span id="mp_y"></span> 

</body> 

</BODY> 

</HTML> 

如果不对,可以试试将 

document.documentElement.scrollLeft 

替换成 

document.body.scrollLeft 




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明