javascript获取元素离文档各边距离的方法


Posted in Javascript onFebruary 13, 2015

本文实例讲述了javascript获取元素离文档各边距离的方法。分享给大家供大家参考。具体实现方法如下:

function getDistance(obj) {  

 if (!obj instanceof jQuery) {  

     obj = $(obj);  

 }  

 var distance = {};  

 distance.top = (obj.offset().top - $(document).scrollTop());  

 distance.bottom = ($(window).height() - distance.top - obj.outerHeight());  

 distance.left = (obj.offset().left - $(document).scrollLeft());  

 distance.right = ($(window).width() - distance.left - obj.outerWidth());  

 return distance;  

}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue--vuex详解
Apr 15 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 #Javascript
Js控制滑轮左右滑动实例
Feb 13 #Javascript
JavaScript函数作用域链分析
Feb 13 #Javascript
JavaScript匿名函数用法分析
Feb 13 #Javascript
js实现进度条的方法
Feb 13 #Javascript
动态加载js的方法汇总
Feb 13 #Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php实现可运算的验证码
2015/11/10 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
AngularJS模块学习之Anchor Scroll
2016/01/19 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
python3调用R的示例代码
2018/02/23 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python爬虫容易学吗
2020/06/02 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
nohup的用法
2012/11/26 面试题
小学科学教学反思
2014/01/26 职场文书
《匆匆》教学反思
2014/02/22 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers