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)
  • 相关阅读:
    python3中模块初识
    Django 应用程序 + 模型 + 基本数据访问
    Axure文本框验证和外部url的调用
    MATLAB 实时脚本(live-script)使用
    Django MTV 开发模式 + 数据库配置
    Django 模板继承
    Django 修改视图文件(views.py)并加载Django模块 + 利用render_to_response()简化加载模块 +locals()
    Django Context对象 + 过滤器 + 标签
    Axure 页面内多组内容切换的实现 + 利用一个内联框架实现百度地图访问
    MATLAB绘图功能(2) 二维底层绘图修饰
  • 原文地址:https://www.cnblogs.com/study100/p/3233181.html
Copyright © 2011-2022 走看看