得到body相对定位的插件
相对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相对定位的插件的更多相关文章
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- 自制 移动端 纯原生 Slider滑动插件
在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理. 给这个插件取名为“veSlider”是指“very easy slider”非常 ...
- jquery插件——点击交换元素位置(带动画效果)
一.需求的诞生 在我们的网页或者web应用中,想要对列表中的元素进行位置调整(或者说排序)是一个常见的需求.实现方式大概就以下两种,一种是带有类似“上移”.“下移”的按钮,点击可与相邻元素交换位置,另 ...
- JQuery+HTML5+CSS3制作时间轴插件,支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
- bootstrap学习笔记之四(javascript插件)
下面展现四个插件的用法,一般插件的功能可以用两种方法实现,一种是引入bootstrap.js后,通过添加data属性实现,另一种则是通过js代码是实现. 第一个插件:下拉菜单的实现 第一种方法:dat ...
- jQuery formValidator表单验证插件常见问题
1. 如何实现一个控件,根据不同的情况,实现不同的控制? 2. 一个页面上我有几个tab页,如何实现每个Tab页上的控件单独校验? 3. 我采用的页面上文字问题的方式,点提交的时候, ...
- 以“图片渐入渐出”为例讲述jQuery插件的具体实现
首先声明,此代码以网友“斯迈欧”原创作为此例的讲解: 在这之前我们先看看我们要做的效果是什么样的: 解析下面的样式:我们要图片在过“一定时间”后自动切换,在右下角处有小方块似数字1,2,3,4,这些数 ...
- 自定义基于jquery竖向瀑布流插件
公司新项目做了一个关于图片的板块,网上找了一些瀑布流插件都不是很适合自己,于是就自己造轮子写一个,并封装成插件github 于是就想分享一下,主要是为了更好的学习与记忆. 如果大家进来了,希望能给我g ...
- JS编写简单的弹窗插件(含有demo和源码)
最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...
随机推荐
- Queue接口的实现类竟然有一个是LinkedList,一个是优先队列(同一个接口,只改了不同的实现类,附源码)
输出是: Queue接口底层换一个实现类,照样的是调用Queue接口中的方法 import java.util.HashMap; import java.util.LinkedList; import ...
- java小知识,驼峰规则
单词之间不以空格.连接号或者底线连结(例如不应写成:camel case.camel-case或camel_case形式).共有两种格式: 1.小驼峰式命名法(lower camel case): 第 ...
- 设置 IntelliJ IDEA 的彩色代码主题
首先,给出一系列 IntelliJ IDEA 代码的彩色主题,供大家选择: VibrantUnknown(Darcula) FadeComments NicePython Solarized Have ...
- python中in,not in,比较运算符,格式化输出,编码
一,python中的in,和not in python中in的作用是检测或查找,例如: c = ‘你好大号胡覅但是啊飞碟说’ b = ‘你好’ print(b in c ) 结果: True c = ...
- java 实现websocket的三种方式
Java中实现websocket常见有以下三种方式: 使用tomcat的websocket实现,需要tomcat 7.x,JEE7的支持. 使用spring的websocket,spring与webs ...
- 并发运算lib
最近对类似于erlang或者golang的并发运算很感兴趣.以下是看到的相关资料. libgo c++,技术:协程,多线程.这是俺发现的用法最漂亮的c++库,用法参考golang CAF 全称c++ ...
- ES9新特性
这篇文章主要介绍ES2018(ES9)的新特性, 以及使用方法 JS是一门跨平台的语言, ES6也就是ECMAScript 2015 花费了5年的时间敲定, 是一次非常大的改版, 之后每年都有一个小版 ...
- href="javacript:;" href="javacript:void(0);" href="#"区别。。。
一.href="javacript:;" 这种用法不正确,这么用的话会出现浏览器访问“javascript:;”这个地址的现象: 二.href="javacript:v ...
- 读DataSnap源代码(一)
Delphi的DataSnap用了一段时间了,但一直感觉有些地方还不够了解,所以花时间阅读了源代码,特作此烂笔头. Datasnap是在之前的WebBorker基础上搭建的,DataSnap向导自动生 ...
- Hadoop Mapreduce 案例 wordcount+统计手机流量使用情况
mapreduce设计思想 概念:它是一个分布式并行计算的应用框架它提供相应简单的api模型,我们只需按照这些模型规则编写程序,即可实现"分布式并行计算"的功能. 案例一:word ...