相对body定位的插件

  function offset(ele){

    //该元素到父级水平定位的距离
    var le=ele.offsetLeft;

    //该元素到父级垂直定位的距离
    var to=ele.offsetTop;

    //该元素到相对父级
    var parent=ele.offsetParent;

    //while  循环语句

    //条件,如果他的父级存在,循环,body中没有offsetParent的属性,所以会到body停止
    while(parent){

      //该元素的水平距离 加上 父级的水平距离
      le+=parent.offsetLeft;

      //该元素的垂直距离 加上 父级的垂直距离
      to+=parent.offsetTop;

      //再将该元素父级的父级;赋值给parent (用于循环)
      parent=parent.offsetParent;
    }

    //返回一个对象 left为最终到body相对定位的水平距离;top为最终到body相对定位的垂直距离;
    return {left:le,top:to};
  }

得到body相对定位的插件的更多相关文章

  1. 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  2. 自制 移动端 纯原生 Slider滑动插件

    在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...

  3. jquery插件——点击交换元素位置(带动画效果)

    一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...

  4. JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局

    一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...

  5. bootstrap学习笔记之四(javascript插件)

    下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...

  6. jQuery formValidator表单验证插件常见问题

    1.    如何实现一个控件,根据不同的情况,实现不同的控制? 2.    一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 3.    我采用的页面上文字问题的方式,点提交的时候, ...

  7. 以“图片渐入渐出”为例讲述jQuery插件的具体实现

    首先声明,此代码以网友“斯迈欧”原创作为此例的讲解: 在这之前我们先看看我们要做的效果是什么样的: 解析下面的样式:我们要图片在过“一定时间”后自动切换,在右下角处有小方块似数字1,2,3,4,这些数 ...

  8. 自定义基于jquery竖向瀑布流插件

    公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...

  9. JS编写简单的弹窗插件(含有demo和源码)

    最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...

随机推荐

  1. ELFhash

    字符串哈希算法(以ELFHash详解)   更多字符串哈希算法请参考:http://blog.csdn.net/AlburtHoffman/article/details/19641123 先来了解一 ...

  2. Java中final的用法总结

    1.         修饰基础数据成员的final 这是final的主要用途,其含义相当于C/C++的const,即该成员被修饰为常量,意味着不可修改.如java.lang.Math类中的PI和E是f ...

  3. 顺平讲try catch finally throw throws(精华)

    try catch finally  有点像if else语句 还有像javascript的服务器执行成功后的回调函数,success:function(){ 进行处理 }; throws的意思是将异 ...

  4. 自动交互安装服务应用,以redis为例

    #!/bin/bash#新建preinstall.sh文件,该文件完成安装前的准备 yum install gcc gcc-* wget expect -y #expect是因为后面我们用到,安装后可 ...

  5. day 51 html 学习 js 学习

    函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别 // 普通函数定义 function f1() { console.log("Hello wor ...

  6. .NET本质论 类型基础

    类型概述 类型是CLR程序的生成块(building block). CLR类型(CLR type)是命名的可重用抽象体. CLR类型定义由零个或多个成员(member)组成.类型的成员控制类型如何使 ...

  7. 互换元素(swap,swap_ranges)

    swap template <class Assignable> void swap(Assignable &a,Assignable &b); iter_swap tem ...

  8. zabbix--3.0--3

      使用JMX监控jvm   vim /usr/local/tomcat/bin/catalina.sh 添加如下内容 CATALINA_OPTS="$CATALINA_OPTS -Dcom ...

  9. laravel 事务处理

    //開啟事務 DB::beginTransaction(); try { //賬號密碼同步到後台登錄表 $user = new \App\Models\User; $user->name = $ ...

  10. 关于meshgrid和numpy.c_以及numpy.r_

    meshgrid的目的是生成两套行列数一致的矩阵,其中一个是行重复,一个是列复制:可以这么来理解,通过ravel()将矩阵数据拉平之后,就可以将这两套矩阵累加在一起,形成一个两行数据,要达到这个效果是 ...