jquery 元素相对定位代码

 更新时间:2010年10月15日 18:23:40   作者:  
align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中)
复制代码 代码如下:

/**
*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)

相关文章

  • jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

    jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

    这篇文章主要介绍了jQuery选择器源码解读(四):tokenize方法的Expr.preFilter,本文用详细的注释解读了tokenize方法的Expr.preFilter的实现源码,需要的朋友可以参考下
    2015-03-03
  • jquery实现图片自动轮播效果

    jquery实现图片自动轮播效果

    这篇文章主要为大家详细介绍了jquery实现图片自动轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Jquery 获取checkbox的checked问题

    Jquery 获取checkbox的checked问题

    这个郁闷了,今天写这个功能的时候发现了问题,上网找了好多资料对照,更加纠结
    2011-11-11
  • jquery默认校验规则整理

    jquery默认校验规则整理

    这篇文章主要介绍了jquery默认校验规则有哪些,需要的朋友可以参考下
    2014-03-03
  • jquery拖动插件(jquery.drag)使用介绍

    jquery拖动插件(jquery.drag)使用介绍

    可以使用鼠标任意拖动列表项改变默认的位置,具体的实现如下(附演示),感兴趣的朋友可以学习下
    2013-06-06
  • jQuery限制图片大小的方法

    jQuery限制图片大小的方法

    这篇文章主要介绍了jQuery限制图片大小的方法,对比分析了常见的jQuery限制图片操作方法及改进方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • jquery操作select方法汇总

    jquery操作select方法汇总

    这篇文章主要介绍了jquery操作select方法,实例汇总了jQuery操作select的读取、设置、添加及删除等技巧,需要的朋友可以参考下
    2015-02-02
  • 整理的40个有用的jQuery技术和教程

    整理的40个有用的jQuery技术和教程

    jQuery确实是一项伟大的技术,通过jQuery的插件,我们可以方便的创建具有更好用户界面的网站。在本文中,将和大家分享40个对你创建更好用户界面的jQuery技术和教程。
    2011-01-01
  • jQuery多级弹出菜单插件ZoneMenu

    jQuery多级弹出菜单插件ZoneMenu

    这篇文章主要介绍了jQuery多级弹出菜单插件ZoneMenu的使用方法,有需要的小伙伴可以参考下
    2014-12-12
  • jquery实现自适应banner焦点图

    jquery实现自适应banner焦点图

    本文主要分享了jquery实现自适应banner焦点图的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论