jquery 元素相對(duì)定位代碼
更新時(shí)間:2010年10月15日 18:23:40 作者:
align:左右對(duì)齊;vlign:垂直對(duì)齊;xleft:水平補(bǔ)給值;xleft:垂直補(bǔ)給值;adjust:是否相對(duì)窗口自動(dòng)調(diào)整;rwindow:定位相對(duì)于窗口(align&vlign為center時(shí)垂直或水平居中)
復(fù)制代碼 代碼如下:
/**
*jQuery rposition
*fix:要定位的元素
*rel:相對(duì)定位的元素
*options:{},align:左右對(duì)齊;vlign:垂直對(duì)齊;xleft:水平補(bǔ)給值;xleft:垂直補(bǔ)給值;adjust:是否相對(duì)窗口自動(dòng)調(diào)整;rwindow:定位相對(duì)于窗口(align&vlign為center時(shí)垂直或水平居中);
*/
(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)
相關(guān)文章
jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter
這篇文章主要介紹了jQuery選擇器源碼解讀(四):tokenize方法的Expr.preFilter,本文用詳細(xì)的注釋解讀了tokenize方法的Expr.preFilter的實(shí)現(xiàn)源碼,需要的朋友可以參考下2015-03-03
jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
Jquery 獲取checkbox的checked問(wèn)題
這個(gè)郁悶了,今天寫這個(gè)功能的時(shí)候發(fā)現(xiàn)了問(wèn)題,上網(wǎng)找了好多資料對(duì)照,更加糾結(jié)2011-11-11
jquery拖動(dòng)插件(jquery.drag)使用介紹
可以使用鼠標(biāo)任意拖動(dòng)列表項(xiàng)改變默認(rèn)的位置,具體的實(shí)現(xiàn)如下(附演示),感興趣的朋友可以學(xué)習(xí)下2013-06-06
jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
本文主要分享了jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02

