jquery獲取div距離窗口和父級dv的距離示例

更新時間：2013年10月10日 16:24:20 作者：

jquery中jquery.offset().top/left用于獲取div距離窗口的距離而jquery.position().top/left用于獲取距離父級div的距離，下面有個不錯的示例，感興趣的朋友可以參考下

jquery中jquery.offset().top / left用于獲取div距離窗口的距離，jquery.position().top / left 用于獲取距離父級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；
//此時_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因為絕對定義是以父級div的左上角的內(nèi)邊框為參考坐標的。
//如果innerBox設(shè)置了邊框的話還要加上邊框的值

（2）jqury.position().top /left用于獲取子div距離父級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 
}) 

您可能感興趣的文章:

相關(guān)文章

jQuery彈出下拉列表插件（實現(xiàn)kindeditor的@功能）
這篇文章主要介紹了jQuery彈出下拉列表插件（實現(xiàn)kindeditor的@功能）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
jQuery加密密碼到cookie的實現(xiàn)代碼
本文通過實例代碼給大家分享了jquery 加密密碼到cookie的實現(xiàn)方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-04-04
鼠標移到導航當前位置的LI變色處于選中狀態(tài)
本文所要實現(xiàn)的效果廣泛應(yīng)用于當前導航,主要表現(xiàn)為鼠標移到導航上面當前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
2013-08-08
jquery 仿錨點跳轉(zhuǎn)到頁面指定位置的實例
下面小編就為大家?guī)硪黄猨query 仿錨點跳轉(zhuǎn)到頁面指定位置的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
Jquery1.9.1源碼分析系列（十五）動畫處理之外篇
這篇文章主要介紹了Jquery1.9.1源碼分析系列（十五）動畫處理之外篇的相關(guān)資料,需要的朋友可以參考下
2015-12-12
jquery衣服顏色選取插件效果代碼分享
這篇文章主要介紹了jquery衣服顏色選取插件效果，很有藝術(shù)感，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery實現(xiàn)按鈕的點擊全選/反選單選框/復選框文本框表單驗證
這篇文章主要介紹了jQuery實現(xiàn)按鈕的點擊全選/反選單選框/復選框文本框表單驗證的相關(guān)資料,需要的朋友可以參考下
2015-06-06
jQuery之動畫ajax事件(實例講解)
下面小編就為大家?guī)硪黄猨Query之動畫ajax事件(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
jquery實現(xiàn)鼠標懸浮彈出氣泡提示框
這篇文章主要為大家詳細介紹了jquery實現(xiàn)鼠標懸浮彈出氣泡提示框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實就和普通JS的用法差不多，只是少了一個on而已第二、三種方法都是綁定事件
2013-08-08