Maison > interface Web > js tutoriel > jquery获取div距离窗口和父级dv的距离示例_jquery

jquery获取div距离窗口和父级dv的距离示例_jquery

WBOY
Libérer: 2016-05-16 17:20:36
original
1328 Les gens l'ont consulté

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:
复制代码 代码如下:


a


innerBox




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的左上角的内边框为参考坐标的。
//如果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:
复制代码 代码如下:


a


innerBox




js:
复制代码 代码如下:

$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal