欢迎光临《小雷的网站》
加入收藏 | 设为首页 | 联系我们
小雷的网站
游客,您好!
请使用QQ先登陆
  • 最新公告:如果有什么问题,请大家联系客服处理.客服在线时间:12:00-23:59 其它时间段请留言.
  • 博文详细内容

    jquery获取div距离窗口和父级dv的距离示例
    资讯栏目:技术文摘 | 发布者:小雷 | 关注度:2375次 | 发布时间:2018-10-21 23:02:23

    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的左上角的内边框为参考坐标的。
    //如果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})
    转载请注:小雷的网站 http://www.leihx.com/news/36.html
    评论

    您还没有登陆,请登陆后再评论吧!
    本站只支持QQ登陆,请不要发布不当的以及违反国家法律的言论!
    ★传说★ 2020-03-29 20:24:12

    6666666666666666


    版权信息:@2018-2025 www.leihx.com 网站访问量:5352558人次 互联网ICP备案:黔ICP备15016820号-4
    联系地址:贵州省铜仁市碧江区川硐教育园区 合作咨询:400-180-5676 (周一至周五 9:00-18:00)