在开发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)

jquery的相对父元素和相对文档定位示例代码的更多相关文章

  1. JQuery中查找父元素,子元素,追加元素,插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  2. jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )

    jQuery之所以这么好用, 首先一点就是$()方法和它强大的选择器. 其中选择器使用的是sizzle引擎, sizzle是jQuery的子项目, 提供高效的选择器查询. 有个好消息告诉大家, 就是s ...

  3. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  4. day049--jQuery文档操作示例

    DOM操作(CRUD增改查删) 创建元素 $('span') // 创建一个span标签 后置插入操作   append(), appendTo() <!DOCTYPE html> < ...

  5. 《从零开始学Swift》学习笔记(Day 57)——Swift编码规范之注释规范:文件注释、文档注释、代码注释、使用地标注释

    原创文章,欢迎转载.转载请注明:关东升的博客 前面说到Swift注释的语法有两种:单行注释(//)和多行注释(/*...*/).这里来介绍一下他们的使用规范. 1.文件注释 文件注释就在每一个文件开头 ...

  6. 《从零開始学Swift》学习笔记(Day 57)——Swift编码规范之凝视规范:文件凝视、文档凝视、代码凝视、使用地标凝视

    原创文章.欢迎转载.转载请注明:关东升的博客 前面说到Swift凝视的语法有两种:单行凝视(//)和多行凝视(/*...*/).这里来介绍一下他们的使用规范. 1.文件凝视 文件凝视就在每个文件开头加 ...

  7. 操作jQuery集合搜索父元素

    搜索父元素 1.1parents()方法 parents()方法用于获取u当前匹配元素集合中的每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选parents([selector]) 其中sel ...

  8. jquery 获取所有父元素

    最终结果: 代码: <!DOCTYPE html> <html> <head> <style> b, span, p, html body { padd ...

  9. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Joynet示例:知乎爬虫(搜索关键字相关回答,并下载其中的---图(mei)片(nv))

    先贴爬虫程序下载地址:http://pan.baidu.com/s/1c2lxl1e 下载解压后 可直接运行 其中的 run.bat:或者你手动打开命令行执行:Joynet examples\Spid ...

  2. Boost.Foreach

    BOOST_FOREACH简化了C++的循环遍历序列元素. 支持的序列类型:Boost.Range识别的序列 STL容器 数组 Null-terminated String std::pair of ...

  3. jQuery实现轮播图效果

    通过改变背景色来达到效果,有下角标和左右箭头,都已经实现. html部分: <!DOCTYPE html> <html> <head> <meta chars ...

  4. hibernate中session的获取使用以及其他注意事项

    hibernate中session的获取使用以及其他注意事项 前言:工作时,在同时使用Hibernate的getSession().getHibernateTemplate()获取Session后进行 ...

  5. jQuery选择器之基本选择器Demo

    测试代码: 01-基本选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  6. Part 30 to 31 Talking about Interfaces in c#

    Part 30 Interfaces in c# We create interfaces using interface keyword. just like classes interfaces ...

  7. 一个页面多Table多分页的问题

    一个页面有多个table,多个pagination,一个pagerForm.这种情况下怎么解决多个pagination不同pagenum的问题呢? 如果是这样的滴话,使用局部刷新就可以了,两个tabl ...

  8. 理解C#系列 / 核心C# / 名称空间

    名称空间namespace 名称空间 名称空间用来逻辑分类,而不是物理上的,名称空间与程序集无关[程序集:经由编译器编译得到的文件],同一个程序集中可以有2不同的名称空间,也可以在不同的程序集中定义同 ...

  9. UI2_UINavigationBar

    // // AppDelegate.m // UI2_UINavigationBar // // Created by zhangxueming on 15/7/6. // Copyright (c) ...

  10. 转: 理解Python的With语句

    Python’s with statement provides a very convenient way of dealing with the situation where you have ...