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 获取标签名(tagName)示例代码
Jul 11 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
vue实现树状表格效果
Dec 29 Vue.js
使用JS实现简易计算器
Jun 14 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
splice slice区别
2006/10/09 Javascript
javascript的函数
2007/01/31 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python如何实现动态数组
2019/11/02 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
让IE支持HTML5的方法
2012/12/11 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
英文慰问信范文
2015/03/24 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android