jquery 元素相对定位代码


Posted in Javascript onOctober 15, 2010
/** 
*jQuery rposition 
*fix:要定位的元素 
*rel:相对定位的元素 
*options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中); 
*/ 
(function(win,$){ 
win.rposition=function(fix,rel,options){ 
var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidth(),wh=$(window).height(),ww=$(window).width(), 
sT=$(document).scrollTop(),sL=$(document).scrollLeft(), 
defaults={ 
align:"left", 
vlign:"top", 
xleft:0, 
xtop:0, 
adjust:true, 
rwindow:false 
}, 
options = $.extend(defaults, options); 
var rectRel={ 
l:$(rel).offset().left, 
t:$(rel).offset().top, 
w:$(rel).outerWidth(), 
h:$(rel).outerHeight() 
}; 
switch(options.align){ 
case "left": 
rectLeft=rectRel.l;break; 
case "right": 
rectLeft=rectRel.l+rectRel.w;break; 
case "center": 
rectLeft=rectRel.l+rectRel.w/2;break; 
case "rleft": 
rectLeft=rectRel.l-rectW;break; 
default: 
rectLeft=rectRel.l; 
}; 
switch(options.vlign){ 
case "top": 
rectTop=rectRel.t;break; 
case "center": 
rectTop=rectRel.t+rectRel.h/2;break; 
case "vbottom": 
rectTop=rectRel.t-rectH; break; 
case "bottom": 
default: 
rectTop=rectRel.t+rectRel.h; 
}; 
if(options.rwindow){ 
if(options.align=="center")rectLeft=(ww-rectW)/2+sL; 
if(options.vlign=="center")rectTop=(wh-rectH)/2+sT; 
}; 
if(options.adjust){ 
if(rectLeft+rectW>ww+sL){rectLeft-=(rectLeft+rectW)-(ww+sL)} 
if(rectTop+rectH>wh+sT){rectTop=rectRel.t-rectH;} 
}; 
$(fix).css({"left":rectLeft+options.xleft,"top":rectTop+options.xtop}); 
} 
})(window,jQuery)
Javascript 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
JS定时关闭窗口的实例
May 22 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
javascript的push使用指南
Dec 05 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
js canvas实现写字动画效果
Nov 30 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
JQuery小知识
Oct 15 #Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 #Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 #Javascript
js限制文本框为整数和货币的函数代码
Oct 13 #Javascript
javascript中"/"运算符常见错误
Oct 13 #Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 #Javascript
理解Javascript_05_原型继承原理
Oct 13 #Javascript
You might like
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
便利店的创业计划书
2014/01/15 职场文书
无故旷工检讨书
2014/01/26 职场文书
《藏戏》教学反思
2014/02/11 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
十周年庆典策划方案
2014/06/03 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
单位计划生育责任书
2015/05/09 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Python 统计序列中元素的出现频度
2022/04/26 Python
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python