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