您的位置：首页 > 编程语言

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

2015-07-11 13:28 585 查看
复制代码 代码如下:

<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.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;">

<div 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)">

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

</div>

当前鼠标坐标为：

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

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

</body>

</BODY>

</HTML>

如果不对，可以试试将

document.documentElement.scrollLeft

替换成

document.body.scrollLeft
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航