jquery 元素相对定位代码_Javascript教程-查字典教程网
jquery 元素相对定位代码
jquery 元素相对定位代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/***jQueryrposition*fix:要定位的元素*rel:相对定位的元素*options:{},align:左...

复制代码 代码如下:

/**

*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教程学习
    热门Javascript教程学习
    编程开发子分类