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 相关文章推荐
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
如何利用php+mysql保存和输出文件
2006/10/09 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
python快速查找算法应用实例
2014/09/26 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python常用的json标准库
2019/02/19 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
司仪主持词两篇
2014/03/22 职场文书
民间个人借款协议书
2014/09/30 职场文书
作风建设剖析材料
2014/10/06 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
不同意离婚上诉状
2015/05/23 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript
Python几种酷炫的进度条的方式
2022/04/11 Python