欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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設置position： relative； innerBox設置position：absolute；并且innerBox設置了top： 40px；
//此時_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因為絕對定義是以父級div的左上角的內(nèi)邊框為參考坐標的。
//如果innerBox設置了邊框的話還要加上邊框的值

（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
})

相關文章

最新評論