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 相关文章推荐
Jquery iframe内部出滚动条
Feb 11 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
Dec 08 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue项目实战总结篇
2018/02/11 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
Python实现字典依据value排序
2016/02/24 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
2014年小学重阳节活动策划方案
2014/09/16 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
导游词格式
2015/02/13 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL