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

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

相關(guān)文章

最新評(píng)論