js实现jquery的offset()方法(获取当前元素相对于文档的偏移量 )

JavaScript022

js实现jquery的offset()方法(获取当前元素相对于文档的偏移量 ),第1张

最近做项目，由于zepto使用的功能较少，想将zepto的功能用较少原生实现，其中有个实现zepto的offset()方法取到各种值的难为了我，我百度了下，大体网上千篇一律的这样写到

我本着试试看的态度将这个方法炒了上去，打印出值结果与我需要的值相差甚远，为此我仔细翻了下源码，源码见下面链接

源码

找到如下方法getBoundingClientRect，翻了下caniuse发现兼容性还好（本人移动端），故可以写成以下方式

如果要考虑兼容性，请仔细看zepto源码

另外上述

改成

也可以实现

列举两种种css解决办法:

1. 使用div包裹img图片, div宽和高都为100%, img图片高度100%, div额外样式

display: flex flex-flow: wrap align-items: center justify-content:center

2. 使用div包裹img图片, div宽和高都为100%, img图片高度100%, img额外样式

margin: 0 auto

上面两种css就已经满足你的需求了

还是给你说一下js的解决思路, 具体代码我可以不写吗

3. img样式

position: fixed left: 50% top: 0 height: 100%

使用js获取img的宽度   给img的css中margin-left赋值宽度的一半的负数