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 相关文章推荐
用于table内容排序
Jul 21 Javascript
利用javascript中的call实现继承
Jan 22 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
用vue写一个日历
Nov 02 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
杏林同学录(四)
2006/10/09 PHP
关于crontab的使用详解
2013/06/24 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
使用Python实现牛顿法求极值
2020/02/10 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
荷兰电脑专场:Paradigit
2018/05/05 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
2014社区三八妇女节活动总结
2014/03/01 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2016年元旦寄语
2015/08/17 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
PHP解决高并发问题
2021/04/01 PHP
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android