作者：乌龙小和尚 | 来源：互联网 | 2022-02-27 08:30
jquery中jquery.offset().topleft用于获取div距离窗口的距离而jquery.position().topleft用于获取距离父级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:
代码如下:
a
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
js:
代码如下:
$(function(){
var_offsetTop = $(".innerBox").offset().top; //280px
})
推荐阅读
-
页面加载进度条是提升用户体验的重要工具，通过在页面头部显示一个加载状态，并在页面完全加载后隐藏，可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ...
[详细]
蜡笔小新 2024-11-18 20:00:09
-
本文为初学者提供了一条清晰的学习路线，帮助他们逐步成长为优秀的Web开发人员。通过十个关键步骤，涵盖从基础到高级的各个方面，确保每位学习者都能找到适合自己的学习方向。 ...
[详细]
蜡笔小新 2024-11-15 20:34:57
-
-
本文介绍了一种使用CSS3和jQuery实现的35款SVG图标加载动画。这些动画不仅视觉效果出色，还能提升用户体验。通过本文，您可以了解如何在项目中应用这些动画。 ...
[详细]
蜡笔小新 2024-11-15 15:01:02
-
本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件，包括自动触发插件的方法、插件的引用方式以及具体的实例。 ...
[详细]
蜡笔小新 2024-11-15 12:24:25
-
.children() 方法用于获取选中元素的所有直接子元素。此方法仅遍历DOM树的一层，如需遍历多层子元素，请使用 .find() 方法。 ...
[详细]
蜡笔小新 2024-11-14 23:50:03
-
本文详细介绍了 Java 网站开发的相关资源和步骤，包括常用网站、开发环境和框架选择。 ...
[详细]
蜡笔小新 2024-11-14 22:39:58
-
本文详细介绍如何使用 Python 进行数据可视化，涵盖从环境搭建到具体实例的全过程。 ...
[详细]
蜡笔小新 2024-11-13 06:03:30
-
一、项目文件1）Properties节点下主要存放的是当前程序集相关的信息，如版本号、标题等。双击”Properties“，打开如下项目属 ...
[详细]
蜡笔小新 2024-11-18 09:51:05
-
本文介绍了一款高性能的高清视频与数据综合采集设备控制板的成功方案，详细阐述了其核心特性和应用场景。 ...
[详细]
蜡笔小新 2024-11-18 00:12:08
-
本文记录了在 Vulnhub DC3 靶机上的渗透测试过程，包括漏洞利用、内核提权等关键步骤，并总结了实战经验和教训。 ...
[详细]
蜡笔小新 2024-11-17 20:50:03
-
本实验旨在掌握Metasploit框架的基本应用方法，重点学习三种常见的攻击方式及其实施思路。实验内容包括一次主动攻击（如MS08-067）、一次针对浏览器的攻击（如MS11-050）以及一次针对客户端的攻击（如Adobe漏洞利用）。此外，还包括成功应用一个辅助模块。 ...
[详细]
蜡笔小新 2024-11-17 17:21:38
-
本文提供了2012年中国科学院大学数学分析和高等代数研究生入学考试的试题，供考生参考和学习。 ...
[详细]
蜡笔小新 2024-11-17 16:24:23
-
本文详细介绍了如何通过FTP方式对HPE OEM Brocade 300交换机进行无中断固件升级，确保网络服务的连续性。 ...
[详细]
蜡笔小新 2024-11-17 12:12:22
-
在 Android API Level 8 及以上版本中，系统提供了一种机制来备份和恢复应用程序数据。通过设置 allowBackup 属性，开发者可以控制是否允许这种备份和恢复功能。然而，这一功能也带来了潜在的安全风险。 ...
[详细]
蜡笔小新 2024-11-17 11:33:44
-
列表生成式虽然简洁高效，但在处理复杂算法时存在局限性。本文将介绍生成器（generator）的概念及其优势，探讨如何通过生成器解决列表生成式的局限性，并提供实际示例。 ...
[详细]
蜡笔小新 2024-11-17 11:19:20
-
京公网安备 11010802041100号