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 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
Node.js笔记之process模块解读
May 31 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
自我鉴定200字
2013/10/28 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
三年级小学生评语
2014/04/22 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫