一、element.offset:返回元素距离带定位父元素的位置
-
offset与
margin//html <div class="boxParent"> <div class="box"> <div class="mask"></div> </div> </div> -
1.
mask跟随鼠标移动原理.box { position: relative } .mask{ position: absolute; left: 0; top: 0; }公式：
mask.style.left = e.pageX - box.offsetLeft -
2.
boxParent/box存在margin.boxParent{margin:50px} .box{margin:50px}公式：
mask.style.left = e.pageX - box.offsetLeft(margin) -
3.
boxParent存在定位.boxParent{ position:reative; margin:50px }-
此时，
box.offsetLeft = 0 -
公式：
mask.style.left = e.pageX - box.offsetLeft（0） -
因此：
mask.style.left == e.pageX == mask.offsetLeft
原理：
mask相对于box进行移动，公式为e.pageX-box.offsetLeft；- 但由于
boxParent存在定位，此时box.offsetLeft = 0，mask.offsetLeft == e.pageX； - 此时公式为
mask.style.left = e.pageX - margin
-
二、offset()、position()
- offset():返回相对于页面的坐标，
可读可改 - position():返回相对于带定位父元素的坐标，
只读
三、jQuery放大镜的坑
原理：大图赋值时，虽然mask设置了禁止超出，但position()、offset()的值仍在增加
解决：
//1.定义变量
let maskPo = $('.mask').position();
//2.mask禁止超出
if (maskPo.left <= 0) {
$('.mask').css('left', '0');
} else if (maskPo.left >= maskW) {
$('.mask').css('left', maskW + 'px');
};
//3.重新取值
maskPo = $('.mask').position();
//4.计算大图移动距离
原理分析：
- javascript
//1.mask禁止超出 if (c.offsetLeft >= maskW) { c.style.left = maskW + 'px'; } //2.获取值 必须在mask后取值 let cP = $('.c').position(); let cO = $('.c').offset(); - jQuery
//1.获取值 jQuery定义变量必须在第一步 let cP = $('.c').position(); let cO = $('.c').offset(); //2.mask禁止超出 if (cP.left >= maskW) { $('.c').css('left', maskW + 'px'); } //此时position、offset的值是变化的 console.log(cP.left, cO.left);- 不定义变量
//1.mask禁止超出 if ($('.c').position().left >= maskW) { $('.c').css('left', maskW + 'px'); } //2.获取值 固定值 let cP = $('.c').position(); let cO = $('.c').offset(); ``` - 变量重新赋值
//1.获取值 let cP = $('.c').position(); let cO = $('.c').offset(); //2.mask禁止超出 if (cP.left >= maskW) { $('.c').css('left', maskW + 'px'); } //3.变量重新赋值 固定值 cP = $('.c').position();
- 不定义变量
