jQuery獲得頁面元素的絕對/相對位置即絕對X,Y坐標
更新時間：2014年03月06日 11:34:12 作者：
jQuery獲得頁面元素的絕對X,Y坐標，可以用offset()方法，下面有個不錯的坐標大家可以參考下
獲取頁面某一元素的絕對X,Y坐標，可以用offset()方法：
<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>
獲取相對(父元素)位置:
<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>
復(fù)制代碼 代碼如下:
<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>
獲取相對(父元素)位置:
復(fù)制代碼 代碼如下:
<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>
相關(guān)文章
下面小編就為大家分享一篇jquery 獲取索引值在一定范圍的列表方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
jQuery Ajax異步處理Json數(shù)據(jù)詳解
jquery ajax處理json數(shù)據(jù)其實與其它ajax處理數(shù)據(jù)沒什么很大的改動，我們只要簡單處理一下ajax部份的dataType數(shù)據(jù)類型等于json即可解決了2013-11-11
jQuery讀取和設(shè)定KindEditor值的方法
這篇文章主要介紹了jQuery讀取和設(shè)定KindEditor值的方法，大家參考使用吧2013-11-11
使用Jquery來實現(xiàn)可以輸入值的下拉選單 雛型
最近案子中，需要使用下拉選單，但問題是，里面選項都會有各 其他：，然後 可以 讓 user 在輸入2011-12-12
本篇文章主要是對jQuery 字體大小的設(shè)置方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
SimpleModal是一個輕量級的jQuery插件，它提供了一個模式對話框發(fā)展強大的接口。這篇文章主要介紹了jQuery simpleModal插件的使用，非常不錯，具有參考借鑒價值，對jquery simplemodal相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-08-08
jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法
這篇文章主要介紹了jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點擊后變換顏色的方法,涉及jQuery響應(yīng)鼠標事件針對頁面元素的遍歷及屬性變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
jquery插件實現(xiàn)鼠標經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
分享一個jquery插件:實現(xiàn)類似淘寶上鼠標經(jīng)過圖片右側(cè)顯示大圖的效果,感興趣的朋友可以研究下，或許對你學(xué)習(xí)jquery有所幫助,千萬不要錯過啊2013-02-02
公告滾動想必大家都有見到過吧，實現(xiàn)方法也有很多，下面為大家介紹使用jquery實現(xiàn)垂直公告滾動，感興趣的朋友不要錯過2013-12-12
jquery自動完成插件(autocomplete)應(yīng)用之PHP版
一般網(wǎng)上這個用于搜索功能增強，增加用戶體驗，還是不錯的。2009-12-12