目录
1.1 offset概述
1.2 offset 与 style 区别
1.3 模态框案例
1.4 仿京东放大镜效果页面
1.1 offset概述
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位
其中的element.offsetParent，是返回该元素带有定位的父级元素，我们之前在学习操作元素的父级元素是【son.parentNode】，那么它们之间有什么区别呢？
son.offsetParent：返回带有定位的父亲，否则返回的是bodyson.parentNode： 返回父亲，是最近一级的父亲，不管父亲有没有定位
1.2 offset 与 style 区别
offset:
offset可以得到任意样式表中的样式值offset系列获得的数值是没有单位的offsetWidth包含 padding +border +widthoffsetWidth等属性是只读属性，只能获取不能赋值所以，我们想要获取元素大小位置，用offset更合适
style:
style只能得到行内样式表中的样式值style.width获得的是带有单位的字符串style.width获得不包含padding和border的值style.width是可读写属性，可以获取也可以赋值所以，我们想要给元素更改值，则需要用style改变
1.3 模态框案例
案例分析：
点击弹出层，模态框和遮挡层会显示出来（display:block)点击关闭按钮，模态框和遮挡层应付隐藏起来(display:none)在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走了鼠标按下触发的事件源是最上面一行，就是title鼠标在页面的坐标-鼠标在盒子内的坐标，才是模态框的位置鼠标按下，我们要得到鼠标在盒子的坐标鼠标移动，就让模态框的坐标设置为：鼠标坐标 - 鼠标在盒子里的坐标即可，注意移动事件写到按下事件里面。鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
HTML：
<button>Login</button><div class="login-bg"><div class="login"><div class="title">登录框<span class="close">关闭</span></div><div class="loginInput"><div>用户名：<input type="text" placeholder="请输入用户名"></div><div>登录密码：<input type="password" placeholder="请输入密码"></div></div></div></div>
CSS：
<style>.login-bg{display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background:rgba(0,0,0,.3) ;}.login{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 400px;height: 300px;padding: 0 10px;background-color: white;border: 1px solid #ebebeb;box-shadow: 0px 0px 20px #ddd;z-index: 999;}.close{float: right;cursor: pointer;}.loginInput{margin-top: 100px;margin-left: 80px;}.loginInput input{margin-bottom: 10px;outline: none;}button{cursor: pointer;}</style>
JS：
<script>var btn = document.querySelector('button')var lb = document.querySelector('.login-bg')var login = document.querySelector('.login')var title = document.querySelector('.title')var close = document.querySelector('.close')btn.addEventListener('click',function(){lb.style.display = 'block'})close.addEventListener('click',function(){lb.style.display = 'none'})//(1)在鼠标按下时，获得鼠标在盒子内的坐标title.addEventListener('mousedown',function(e){var diffX = e.pageX - login.offsetLeftvar diffY = e.pageY - login.offsetTop//（2）在鼠标移动时，拿当前鼠标在页面的坐标 — 鼠标在盒子内的坐标，就是模态框的Left、 Topdocument.addEventListener('mousemove',move)function move(e){var newX = e.pageX - diffXvar newY = e.pageY - diffY//把盒子的Left、Top赋值给盒子login.style.left = newX + 'px'login.style.top = newY + 'px'}//（3）鼠标弹起，就让鼠标移动事件删除document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move)})})//</script>
1.4 仿京东放大镜效果页面
案例分析：
遮挡层跟随鼠标功能把鼠标坐标给遮挡层不合适，因为遮挡层坐标以父盒子为准首先是获得鼠标在盒子的坐标之后把数值给遮挡层做为left和top值，通过style来设置此时乃至鼠标移动事件，在盒子里的移动【box】遮挡层位置与鼠标位置离得太远，原因是遮挡层自身的宽度和高度，所以要减去遮挡层的一半遮挡层不能超出盒子范围如果小于0，就把坐标设置为0如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离遮挡层的最大移动距离：盒子宽度-遮挡层的宽度
我们先来看一下结构，我的结构是随便搭的，和官网样式不同，主要看是怎样实现的。
HTML：
<div class="box">//盒子<img src="./img/CUTE.jpg">//遮挡层<div class="mask"></div><div class="big"><img src="./img/CUTE.jpg" alt=""></div></div>
CSS:
<style> * {margin: 0;padding: 0;}.box {position: relative;left: 20px;width: 400px;border: 1px solid #ccc;}.box>img {width: 400px;}.mask {display: none;position: absolute;top: 0;left: 0;width: 200px;height: 200px;background-color: pink;border: 1px solid #ccc;opacity: .7;cursor: move;}.big {display: none;width: 700px;height: 500px;position: absolute;left: 410px;top: 0;background-color: pink;border: 1px solid #ccc;}.big>img{width: 100%;height: 100%;}</style>
JS：
<script>//获取元素var mask = document.querySelector('.mask')var box = document.querySelector('.box')var big = document.querySelector('.big')var bigImg = document.querySelector('.bigImg')//当鼠标移入和移出时，遮挡层和大图显示和隐藏box.addEventListener('mouseover',function(){mask.style.display = 'block'big.style.display = 'block'})box.addEventListener('mouseout',function(){mask.style.display = 'none'big.style.display = 'none'})//给盒子添加鼠标移动事件box.addEventListener('mousemove', function (e) {//(1) 先计算出鼠标在盒子内的坐标var x = e.pageX - box.offsetLeftvar y = e.pageY - box.offsetTop//(2)减去盒子宽度和高度的一半//(3)我们mask移动的距离var maskX = x - mask.offsetWidth / 2var maskY = y - mask.offsetHeight / 2var maskMax = box.offsetWidth-mask.offsetWidthvar maskMaxY = box.offsetHeight-mask.offsetHeight//(4)如果横坐标小于了0，就让它停留在0的位置if(maskX <= 0){maskX = 0 }else if(maskX >= maskMax){maskX = maskMax}if(maskY <= 0){maskY = 0 }else if(maskY >= maskMaxY){maskY = maskMaxY}mask.style.left = maskX + 'px'mask.style.top = maskY + 'px'var bigMax = big.offsetWidth - bigImg.offsetWidthvar bigImgX = maskX * bigMax/maskMaxvar bigImgY = maskY * bigMax/maskMaxYbigImg.style.left =bigImgX +'px'bigImg.style.top = bigImgY +'px'})</script>
到这之后，我们遮挡层在盒子中的移动基本已经完成了，但是我们要的效果是当我们鼠标移动某个地方时，大图是相应的放大效果，这个我们是怎么完成呢?
其中比较的核心是一个等比例公式！
好啦好啦，关于元素偏移量今天就说这么多，拜比~
如果觉得《JS | 元素偏移量offset——“模态框”以及“仿京东放大镜效果页面”案例分析》对你有帮助，请点赞、收藏，并留下你的观点哦！
