jQuery position() 源码解读
position的代码比较简单。。。
position: function() {
if ( !this[ 0 ] ) {
return;
} var offsetParent, offset,
elem = this[ 0 ],
parentOffset = { top: 0, left: 0 }; // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is its only offset parent
if ( jQuery.css( elem, "position" ) === "fixed" ) {
// Assume getBoundingClientRect is there when computed position is fixed
offset = elem.getBoundingClientRect(); } else {
// Get *real* offsetParent
offsetParent = this.offsetParent(); // Get correct offsets
offset = this.offset();
if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
parentOffset = offsetParent.offset();
} // Add offsetParent borders
parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
} // Subtract parent offsets and element margins
return {
top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true ),
left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true )
};
}
如果当前元素是固定定位,可以直接使用getBoundingClientRect()方法获取其相对于视口的位置。
如果不是固定定位,这时候我们首先需要获取自身的offset,然后找到最近的有定位的父元素,来获取这个父元素的offset
因为position求的是元素相对于最近的有定位的父元素的位置
所以,你需要根据当前元素的offset-父元素的offset-负元素的边框-当前元素的外边距来获取
有一个疑问就是为什么要去排除margin的距离,看了几篇文章,说是position是类似把元素当初一个有定位的元素来处理,这样的话,确实可以理解的通,那么,此时position.left position.top 就相当于css中的left 和 top ?
jQuery position() 源码解读的更多相关文章
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- jQuery toggleClass 源码解读
toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...
- jQuery attr() 源码解读
我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...
- jquery offsetParent()源码解读
offsetParent: function() { return this.map(function() { var offsetParent = this.offsetParent || docE ...
- jquery.fileupload源码解读笔记
基础编程风格 新建 test.html 和 test.js和 main.js和 无论哪种顺序 <body> <script src="/Sandeep/js/jquery ...
- jQuery.extend()源码解读
// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = funct ...
- jQuery框架源码解读
1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...
- jQuery addClass() 源码解读
addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = ...
- jQuery removeAttr() 源码解读
removeAttr比attr的代码要简单很多~~~ removeAttr: function( name ) { return this.each(function() { jQuery.remov ...
随机推荐
- ffmpeg: error while loading shared libraries: libavdevice.so.52
今天在编译安装ffmpeg的时候出现了题目中的问题,最终解决方案如下: errors: ffmpeg正常安装后执行ffmpeg时出现如下错误:ffmpeg: error while loading s ...
- 【USACO】Optimal Milking
题目链接 : [POJ]点击打开链接 [caioj]点击打开链接 算法 : 1:跑一遍弗洛伊德,求出点与点之间的最短路径 2:二分答案,二分”最大值最小“ 3.1:建边,将 ...
- codevs 1046 旅行家的预算
传送门 1046 旅行家的预算 1999年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold题解 题目描述 Des ...
- java中的异常The given object has a null identifier
修改页面点击提交时报如下异常: org.hibernate.TransientObjectException: The given object has a null identifier: com. ...
- Java操作系统硬件的方法Unsafe
通常Java代码都是运行在JVM中而不能直接访问系统硬件如进行内存分配释放等,但如果有需要跳过JVM直接用Java访问系统硬件,比如像C语言指针一样操作的话就可以调用Unsafe对象相关方法. 1.U ...
- spring boot 部署 发布
Spring Boot应用的打包和部署 字数639 阅读2308 评论0 喜欢5 现在的IT开发,DevOps渐渐获得技术管理人员支持.云计算从ECS转向Docker容器技术.微服务的概念和讨论也越来 ...
- PYTHON 异常处理 一 ASSERT
assert语句,如果没记错,这个东西在C或者C++里面也有的.属于短小的断言.下面的是来自python help document的说明: Assert statements are a conve ...
- 【Boost】boost库asio详解3——io_service作为work pool
无论如何使用,都能感觉到使用boost.asio实现服务器,不仅是一件非常轻松的事,而且代码很漂亮,逻辑也相当清晰,这点上很不同于ACE.使用io_service作为处理工作的work pool,可以 ...
- 想要删除table的某一行的js写法
<tr><td onclick="del_tr(this)" >删除</td></tr> // 删除一行 function del_ ...
- android实例3:拖动条
个人网站http://www.ravedonut.com/ 拖动条改变图片的透明度 xml <LinearLayout xmlns:android="http://schemas.an ...