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写的日历(代码部分网摘)
Sep 20 Javascript
小议Javascript中的this指针
Mar 18 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
从0开始学Vue
Oct 27 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php图片添加水印例子
2016/07/20 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python 实现两个npy档案合并
2020/07/01 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
私用公车造成事故检讨书
2014/11/16 职场文书
培训班通知
2015/04/25 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
python中__slots__节约内存的具体做法
2021/07/04 Python