jquery獲取div距離窗口和父級(jí)dv的距離示例
更新時(shí)間：2013年10月10日 16:24:20 作者：
jquery中jquery.offset().top/left用于獲取div距離窗口的距離而jquery.position().top/left用于獲取距離父級(jí)div的距離，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
jquery中jquery.offset().top / left用于獲取div距離窗口的距離，jquery.position().top / left 用于獲取距離父級(jí)div的距離（必須是絕對定位的div）。
（1）先介紹jquery.offset().top / left
css：
復(fù)制代碼 代碼如下:
*{ margin: 0px; padding: 0px; }
div{ margin: 0px auto; }
.a{ width: 960px; height: 200px; }
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; }
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; }
html:
復(fù)制代碼 代碼如下:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
復(fù)制代碼 代碼如下:
$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})
這里的280px= a.height/200px + parentBox.padding-top/30px + parentBox.margin-top/40px + innerBox.margin-top/10px;
//如果這邊parentBox設(shè)置position： relative； innerBox設(shè)置position：absolute；并且innerBox設(shè)置了top： 40px；
//此時(shí)_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因?yàn)榻^對定義是以父級(jí)div的左上角的內(nèi)邊框?yàn)閰⒖甲鴺?biāo)的。
//如果innerBox設(shè)置了邊框的話還要加上邊框的值
（2）jqury.position().top /left用于獲取子div距離父級(jí)div的距離，并且子div必須是絕對定位
css：
復(fù)制代碼 代碼如下:
*{ margin: 0px; padding: 0px; }
div{ margin: 0px auto; }
.a{ width: 960px; height: 200px; }
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; position: relative; }
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; position: absolute; }
html:
復(fù)制代碼 代碼如下:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
復(fù)制代碼 代碼如下:
$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})
您可能感興趣的文章:
- jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
- 通過JQuery將DIV的滾動(dòng)條滾動(dòng)到指定的位置方便自動(dòng)定位
- jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
- JQuery實(shí)現(xiàn)點(diǎn)擊div以外的位置隱藏該div窗口
- jquery獲取div寬度的實(shí)現(xiàn)思路與代碼
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- javascript和jquery修改a標(biāo)簽的href屬性
- Jquery為a標(biāo)簽的href賦值實(shí)現(xiàn)代碼
- jquery觸發(fā)a標(biāo)簽跳轉(zhuǎn)事件示例代碼
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery通過a標(biāo)簽刪除table中的一行的代碼
- jQuery簡單獲取DIV和A標(biāo)簽元素位置的方法
相關(guān)文章
jQuery彈出下拉列表插件（實(shí)現(xiàn)kindeditor的@功能）
這篇文章主要介紹了jQuery彈出下拉列表插件（實(shí)現(xiàn)kindeditor的@功能）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery加密密碼到cookie的實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家分享了jquery 加密密碼到cookie的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-04-04
鼠標(biāo)移到導(dǎo)航當(dāng)前位置的LI變色處于選中狀態(tài)
本文所要實(shí)現(xiàn)的效果廣泛應(yīng)用于當(dāng)前導(dǎo)航,主要表現(xiàn)為鼠標(biāo)移到導(dǎo)航上面當(dāng)前的LI變色，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
jquery 仿錨點(diǎn)跳轉(zhuǎn)到頁面指定位置的實(shí)例
下面小編就為大家?guī)硪黄猨query 仿錨點(diǎn)跳轉(zhuǎn)到頁面指定位置的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
Jquery1.9.1源碼分析系列（十五）動(dòng)畫處理之外篇
這篇文章主要介紹了Jquery1.9.1源碼分析系列（十五）動(dòng)畫處理之外篇 的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jquery衣服顏色選取插件效果，很有藝術(shù)感，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕的點(diǎn)擊 全選/反選 單選框/復(fù)選框 文本框 表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2015-06-06
jQuery之動(dòng)畫ajax事件(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query之動(dòng)畫ajax事件(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)鼠標(biāo)懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實(shí)就和普通JS的用法差不多，只是少了一個(gè)on而已第二、三種方法都是綁定事件2013-08-08