zoukankan      html  css  js  c++  java
  • jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下

    在开发jquery时候经常需要用到定位,这里概括两种定位:

    1、相对父元素定位: $("#ele").position(),进而得到 left = $("#ele").postion().left right = $("#ele").postion().right
    2、相对文档定位:$("#ele").offset(), 进而得到 left = $("#ele").offset().left right = $("#ele").offset().right

    jquery 元素相对定位代码

    align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中)

    /**
    *jQuery rposition
    *fix:要定位的元素
    *rel:相对定位的元素
    *options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中);
    来源:www.jbxue.com
    */
    (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)
  • 相关阅读:
    mysql修改数据表名
    HDU 5742 It's All In The Mind (贪心)
    HDU 5752 Sqrt Bo (数论)
    HDU 5753 Permutation Bo (推导 or 打表找规律)
    HDU 5762 Teacher Bo (暴力)
    HDU 5754 Life Winner Bo (博弈)
    CodeForces 455C Civilization (并查集+树的直径)
    CodeForces 455B A Lot of Games (博弈论)
    CodeForces 455A Boredom (DP)
    HDU 4861 Couple doubi (数论 or 打表找规律)
  • 原文地址:https://www.cnblogs.com/study100/p/3233181.html
Copyright © 2011-2022 走看看