ホームページ > ウェブフロントエンド > jsチュートリアル > jquery要素の相対位置 code_jquery

jquery要素の相対位置 code_jquery

WBOY
リリース: 2016-05-16 18:18:36
オリジナル
1188 人が閲覧しました
复制代代码如下:

/**
*jQuery rposition
*fix: 配置される要素
*rel: 相対位置決め要素
*options: {}、align: 左と右の配置、vlign: 垂直配置;値;xleft: 垂直方向の供給値; 調整: ウィンドウを基準にして自動的に調整するかどうか; rwindow: ウィンドウを基準にして配置します (align&vlign が中央の場合は垂直方向または水平方向の中央に配置されます)。*/
(function(win ,$){
win.rposition=function(fix,rel,options){
var rectLeft,rectTop,rectH=fix.outerHeight(),rectW=fix.outerWidth(),wh=$(ウィンドウ) .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);
varectRel={
l:$(rel).offset().left,
t:$(rel).offset().top,
w:$(rel).outerWidth(),
h:$(rel).outerHeight()
};
switch(options.align){
case "left":
rectLeft=rectRel.l;break;
ケース "右":
rectLeft=rectRel.l rectRel.w;break;
ケース "センター":
rectLeft=rectRel.l .w/2;break;
ケース "rleft":
rectLeft=rectRel.l-rectW;
デフォルト:
rectLeft=rectRel.l; switch(options.vlign){
case "トップ":
rectTop=rectRel.t;break;
case "center":
rectTop=rectRel.t rectRel.h/2;break;
case "vbottom":
rectTop=rectRel.t-rectH;壊す;
ケース "ボトム":
デフォルト:
rectTop=rectRel.tectRel.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(rectLeftrectW>ww sL){rectLeft-=(rectLeftrectW)-(wwsL)}
if(rectToprectH>whsT){rectTop=rectRel .t-rectH;}
};
$(fix).css({"left":rectLeft options.xleft,"top":rectTop options.xtop});
}
})(window,jQuery)

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート