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>
復制代碼 代碼如下:
<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>
相關文章
jQuery Ajax異步處理Json數(shù)據(jù)詳解
jquery ajax處理json數(shù)據(jù)其實與其它ajax處理數(shù)據(jù)沒什么很大的改動,我們只要簡單處理一下ajax部份的dataType數(shù)據(jù)類型等于json即可解決了2013-11-11使用Jquery來實現(xiàn)可以輸入值的下拉選單 雛型
最近案子中,需要使用下拉選單,但問題是,里面選項都會有各 其他:,然後 可以 讓 user 在輸入2011-12-12jQuery實現(xiàn)導航欄頭部菜單項點擊后變換顏色的方法
這篇文章主要介紹了jQuery實現(xiàn)導航欄頭部菜單項點擊后變換顏色的方法,涉及jQuery響應鼠標事件針對頁面元素的遍歷及屬性變換相關操作技巧,需要的朋友可以參考下2017-07-07jquery插件實現(xiàn)鼠標經(jīng)過圖片右側顯示大圖的效果(類似淘寶)
分享一個jquery插件:實現(xiàn)類似淘寶上鼠標經(jīng)過圖片右側顯示大圖的效果,感興趣的朋友可以研究下,或許對你學習jquery有所幫助,千萬不要錯過啊2013-02-02jquery自動完成插件(autocomplete)應用之PHP版
一般網(wǎng)上這個用于搜索功能增強,增加用戶體驗,還是不錯的。2009-12-12