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


Posted in Javascript onOctober 10, 2013

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 
})
Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript中的其他对象
Jan 16 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 #Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 #Javascript
javascript中的document.open()方法使用介绍
Oct 09 #Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 #Javascript
js onload事件不起作用示例分析
Oct 09 #Javascript
js 控制图片大小核心讲解
Oct 09 #Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 #Javascript
You might like
php获取字段名示例分享
2014/03/03 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
深入理解Node module模块
2018/03/26 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
python中adb有什么功能
2020/06/07 Python
python怎么调用自己的函数
2020/07/01 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
《从现在开始》教学反思
2014/04/15 职场文书
机关保密承诺书
2014/06/03 职场文书
2015年检验科工作总结
2015/04/27 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
初中毕业生感言
2015/07/31 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript