简单来说要实现的功能：有一张图片，然后一个黄色透明遮挡层在这张图片内移动，移动到图片的哪儿，哪儿就放大，实现一个放大镜的功能
整体思路：
一、布局：
先创建一个大盒子，里面包含了原图片398x398px以及边框为1px，总大小为400px的盒子，一个遮挡层的盒子300x300px，一个原图的放大图片盒子500x500px，放大图为800x800px。此案例涉及所有图片以及盒子涉及都为等高等宽，所以一些变量可以就用一个代替。
二、style样式：
<style>
.pre {
position: relative;
height: 398px;
width: 398px;
border: 1px solid #ccc;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #FEDE4F;
opacity: .5;
border: 1px solid #ccc;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
background-color: pink;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>其中遮挡层和放大的图片都要隐藏，等鼠标经过的时候再显示出来
三、script里面
先了解offset偏移量以及offset和style的区别
获取元素大小位置，用offset；给元素更改值，用style。
1.先获得这几个盒子元素
2.给这个图片盒子添加鼠标经过，离开事件
3.给图片添加鼠标移动事件
（1）获取鼠标在图片盒子里的坐标
（2）让鼠标定位到遮挡层盒子的正中央
（3）让鼠标不要超过原图片的这个盒子范围
让鼠标位于0到maskX之间，因为他是个正方形，你可以就用一个x轴的maskMax这个变量就行了，我这里写的有点复杂了
（4）把刚才得到的maskX和maskY值给遮挡层的left值和top值
4.让放大图片跟随鼠标（遮挡层）移动
有一个公式：
所以，大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
遮挡层移动距离maskX和maskY已经知道了，以及遮挡层的最大移动距离maskX也知道了
先求大图片的最大移动距离，offset和父节点有关的，所以得获取父盒子元素，以及放大图片的宽高大于盒子宽高，大盒子的最大移动距离就等于bigImg=大图片的偏移量-装大图片的盒子的偏移量为800-502=298px。
代入公式：求出大盒子的坐标
这里就是得出原图片和放大图片的那个比例，然后就好解了。
四、以上body完整代码：
<body>
<div>
<div class="pre">
<img src="../05-京东放大镜效果/upload/s3.png" alt="">
<div class="mask"></div>
<div class="big">
<img src="../05-京东放大镜效果/upload/big.jpg" alt="" class="bigImg">
</div>
</div>
</div>
<script>
var pre = document.querySelector('.pre');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//鼠标经过
pre.addEventListener('mouseover', function () {
mask.style.display = 'block';
big.style.display = 'block';
})
pre.addEventListener('mouseout', function () {
mask.style.display = 'none';
big.style.display = 'none';
})
// 鼠标移动的时候
pre.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log(x, y);
//盒子高度的一半150
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = pre.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = pre.offsetWidth - mask.offsetWidth;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= pre.offsetHeight - mask.offsetHeight) {
maskY = pre.offsetHeight - mask.offsetHeight;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
//大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
</script>
</body>五、演示结果：
