手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery 元素相对定位代码
jquery 元素相对定位代码
摘要:复制代码代码如下:/***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)

【jquery 元素相对定位代码】相关文章:

jQuery获得字体颜色16位码的方法

javascript相关事件的几个概念

jQuery实现弹出窗口中切换登录与注册表单

Js和JQuery获取鼠标指针坐标的实现代码分享

jQuery判断一个元素是否可见的方法

jquery合并表格中相同文本的相邻单元格

鼠标图片振动代码

Jquery中基本选择器用法实例详解

Ctrl + Enter提交前检测的代码

简单的防盗链功能代码(iframe)

精品推荐
分类导航