<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY style="margin:40px;">
<div style="height:400px;width:300px;background-color:blue;" οnmοusemοve="tellMSPosition(event,this)">
第一個測試DIV
DIV 定位方式：普通定位
</div>
<div id="test" style="background-color:#000000;color:#FFFFFF;width:300px;height:300px;position:absolute;top:280px;left:350px;margin:0px; border:0px;" >
第二個測試DIV<br />
DIV 定位方式：絕對定位<br />
<br />
<br />
當前鼠標座標爲：<br />
mousePosition.X：<span id="mp_x"></span><br />
mousePosition.Y：<span id="mp_y"></span>
</div>
</body>
<script type="text/javascript">
function getMousePosition(event,o)
{
o = document.all("test");
var mousePosition={x:0,y:0};
var top,left,obj;
obj=o;
var ParentObj=obj;
left=obj.offsetLeft;
while(ParentObj=ParentObj.offsetParent){
left+=ParentObj.offsetLeft;
}
mousePosition.x=event.clientX-left+document.body.scrollLeft;
ParentObj=obj;
top=obj.offsetTop;
while(ParentObj=ParentObj.offsetParent){
top+=ParentObj.offsetTop;
}
mousePosition.y=event.clientY-top+document.body.scrollTop;
return mousePosition;
}
function tellMSPosition(event,o)
{
var t=getMousePosition(event,o)
document.getElementById("mp_x").innerHTML = t.x +"px";
document.getElementById("mp_y").innerHTML = t.y +"px";
}
</script>
</BODY>
</HTML>javascript取鼠標相對位置座標
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章