jquery獲取div距離窗口和父級(jí)dv的距離示例
jquery中jquery.offset().top / left用于獲取div距離窗口的距離,jquery.position().top / left 用于獲取距離父級(jí)div的距離(必須是絕對定位的div)。
(1)先介紹jquery.offset().top / left
css:
*{ 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:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
$(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:
*{ 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:
<body>
<div class="a"> a<div>
<div class="parentBox">
<div class="innerBox">innerBox</div>
</div>
</body>
js:
$(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.Validate驗(yàn)證庫知識(shí)點(diǎn)的詳解
本篇文章介紹了,基于jQuery.Validate驗(yàn)證庫知識(shí)點(diǎn)的詳解。需要的朋友參考下2013-04-04基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)
數(shù)字時(shí)鐘在web倒計(jì)時(shí),web鬧鐘效果以及基于html5的web app中,本文給大家介紹基于jquery和css3制作數(shù)字時(shí)鐘附源碼下載,感興趣的朋友來看看吧2015-11-11jQuery實(shí)現(xiàn)簡單日期格式化功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單日期格式化功能,涉及jQuery調(diào)用javascript針對日期格式轉(zhuǎn)換擴(kuò)展實(shí)現(xiàn)日期格式化功能相關(guān)操作技巧,需要的朋友可以參考下2017-09-09jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過提示信息的地圖熱點(diǎn)效果
這是一個(gè)升級(jí)版本,更新了一個(gè)在IE8里的小問題,加入了提示框的內(nèi)容自動(dòng)換行處理(北京點(diǎn)上有演示)!估計(jì)差不多該是最后樣式了。IE6、IE8、谷歌、火狐、測試正常。2015-04-04jQuery簡單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡易選項(xiàng)卡的代碼,通過控制css熟悉來實(shí)現(xiàn)tab切換,思路清晰,這里推薦給大家。2015-03-03基于jQuery的360圖片展示實(shí)現(xiàn)代碼
基于jQuery的360圖片展示實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-06-06