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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
PHP生成唯一订单号
2015/07/05 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python单例模式实例分析
2015/01/14 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
市场营销专业推荐信
2013/11/03 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
寄语十八大感言
2014/02/07 职场文书
廉洁使者实施方案
2014/03/29 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
2014年工程师工作总结
2014/11/25 职场文书
公司年会开场白
2015/06/01 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android