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 miscellanea -display data real time, using window.status
Jan 09 Javascript
一页面多XMLHttpRequest对象
Jan 22 Javascript
jQuery select控制插件
Aug 17 Javascript
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php 信息采集程序代码
2009/03/17 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python中设置变量访问权限的方法
2015/04/27 Python
python图像处理之反色实现方法
2015/05/30 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python图像处理入门(一)
2019/04/04 Python
Django的性能优化实现解析
2019/07/30 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
出纳员的岗位职责
2014/02/22 职场文书
学校运动会霸气口号
2014/06/07 职场文书
委托书怎样写
2014/08/30 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
同事打架检讨书
2015/05/06 职场文书
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL