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的面向对象(一)
Nov 09 Javascript
如何判断图片地址是否失效
Feb 02 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
Dec 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
收音机的保养
2021/03/01 无线电
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
IE下js调试工具Companion.JS
2010/10/15 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
快速入门python学习笔记
2017/12/06 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
六月份红领巾广播稿
2014/02/03 职场文书
关于元旦的广播稿
2014/02/16 职场文书
保护地球的标语
2014/06/17 职场文书
集体生日活动方案
2014/08/18 职场文书
代理人委托书
2014/09/16 职场文书
发布会邀请函
2015/01/31 职场文书
歌舞青春观后感
2015/06/10 职场文书
Python time库的时间时钟处理
2021/05/02 Python
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Python实现简单得递归下降Parser
2022/05/02 Python