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中实现类的方式探讨
Aug 28 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
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
destoon整合UCenter图文教程
2014/06/21 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
Python GUI布局尺寸适配方法
2018/10/11 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Form表单及django的form表单的补充
2019/07/25 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python递归实现打印多重列表代码
2020/02/27 Python
序列化Python对象的方法
2020/08/01 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
weblogic面试题
2016/03/07 面试题
如何写出高性能的JSP和Servlet
2013/01/22 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
旅行社优秀创业计划书
2014/08/16 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
tree shaking对打包体积优化及作用
2022/07/07 Java/Android