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 UI Datepicker時(shí)間控件的使用方法(終結(jié)版)
這篇文章是jquery UI Datepicker時(shí)間控件的使用方法終結(jié)版,可以說是技術(shù)的升華,實(shí)現(xiàn)的功能有限制的開始時(shí)間和結(jié)束時(shí)間跨度不超過三天,并配置有清空時(shí)間,重選時(shí)間等,感興趣的小伙伴們可以參考一下2015-11-11淺析jQuery中調(diào)用ajax方法時(shí)在不同瀏覽器中遇到的問題
這篇文章主要介紹了jQuery中調(diào)用ajax方法時(shí)在不同瀏覽器中遇到的問題,因不同瀏覽器默認(rèn)設(shè)置的不同造成的問題2014-06-06jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單拖拽功能,結(jié)合實(shí)例形式分析了jQuery鼠標(biāo)事件響應(yīng)及頁面元素動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下2016-09-09artDialog 4.1.5 Dreamweaver代碼提示/補(bǔ)全插件 附下載
artDialog是一個(gè)輕巧且高度兼容的javascript對(duì)話框組件,可讓你的網(wǎng)頁交互擁有桌面軟件般的用戶體驗(yàn)2012-07-07JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
在程序提交后,為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置,利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示,需要的朋友可以了解下2012-12-12