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 相关文章推荐
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
javascript 实现map集合
Apr 03 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
js 轮播效果实例分享
Dec 28 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
js for终止循环 跳出多层循环
2018/10/04 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python的函数的一些高阶特性
2015/04/27 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
利用nohup来开启python文件的方法
2019/01/14 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
tornado+celery的简单使用详解
2019/12/21 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
家长寄语大全
2014/04/02 职场文书
校园演讲稿汇总
2014/05/21 职场文书
2015年读书月活动总结
2015/03/26 职场文书