獲取鼠標(biāo)在div中的相對位置的實(shí)現(xiàn)代碼
更新時(shí)間：2013年12月30日 17:47:56 作者：
如何獲取鼠標(biāo)在div中的相對位置，其實(shí)是很簡單，下有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<HEAD>
<TITLE> JS獲取DIV相對坐標(biāo)</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,經(jīng)測試,有2PX的誤差...
</div>
當(dāng)前鼠標(biāo)坐標(biāo)為：
X：<span id="mp_x"></span>
Y：<span id="mp_y"></span>
</body>
</BODY>
</HTML>
如果不對，可以試試將
document.documentElement.scrollLeft
替換成
document.body.scrollLeft
相關(guān)文章
在iframe里的頁面編寫js，實(shí)現(xiàn)在父窗口上創(chuàng)建動(dòng)畫效果展開和收縮的div（不變動(dòng)iframe父窗口代碼）
在iframe里的頁面編寫js，實(shí)現(xiàn)在父窗口上創(chuàng)建動(dòng)畫效果展開和收縮的div（不變動(dòng)iframe父窗口代碼）2011-12-12
JavaScript頁面模板庫handlebars的簡單用法
本文主要是給大家分享的一個(gè)javascript頁面模板庫Handlebars的簡單用法，可以幫助大家輕松的構(gòu)建語義化模板，非常的實(shí)用，推薦給大家。2015-03-03
JavaScript 經(jīng)典實(shí)例日常收集整理(常用經(jīng)典)
本文是小編日常收集整理些js經(jīng)典實(shí)例，非常具有參考借鑒價(jià)值，需要的朋友一起了解了解吧2016-03-03
判斷div滑動(dòng)到底部的scroll實(shí)例代碼
下面小編就就為大家分享一篇判斷div滑動(dòng)到底部的scroll實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript鼠標(biāo)特效,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JS實(shí)現(xiàn)網(wǎng)頁滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法,實(shí)例分析了javascript針對鼠標(biāo)事件的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)遠(yuǎn)程控制的基本原理和實(shí)現(xiàn)方法
遠(yuǎn)程控制是指通過網(wǎng)絡(luò)等遠(yuǎn)距離通訊手段控制另一設(shè)備的操作行為，在現(xiàn)實(shí)生活中，隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，遠(yuǎn)程控制技術(shù)越來越重要，本文將詳細(xì)介紹?JS?實(shí)現(xiàn)遠(yuǎn)程控制的基本原理、開發(fā)流程和實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記
這篇文章主要針對JavaScript數(shù)據(jù)類型整理的學(xué)習(xí)筆記，分享給大家，感興趣的小伙伴們可以參考一下2016-01-01
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來實(shí)現(xiàn)一個(gè)簡單的拖拽效果,需要的朋友可以參考下2023-09-09
JS實(shí)現(xiàn)的合并兩個(gè)有序鏈表算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的合并兩個(gè)有序鏈表算法,結(jié)合實(shí)例形式分析了JavaScript鏈表的定義、節(jié)點(diǎn)插入、刪除、查找等相關(guān)算法實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02