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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
python中split方法用法分析
2015/04/17 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python面向对象特殊成员
2017/04/24 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python图片合成的示例
2020/11/09 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
年终自我鉴定
2013/10/09 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年调度员工作总结
2014/11/19 职场文书
实习科室评语
2015/01/04 职场文书
结婚主持人致辞
2015/07/28 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python