用 js 实现购物网站中的商品放大镜效果

首先说一下原理，以天猫某商品放大镜效果为例：
所谓的放大镜效果，其实也是欺骗我们眼球的一种效果，这里我们可以看到，图片显示去下面那一排小图与遮盖层的图片和放大层的图片其实是一样的，只是分辨率不同，所以实现放大镜效果，就需要这么几组分辨率大小不同，但是图片内容相同的图片：
显然，小图中放的就是我这里图片名中带有small的小图了，遮盖层就是正常大小的图，放大层就是带有big的放大的图了，然后再加入适当的位移和显示效果，就达成我们见到的放大镜效果了，下面就通过代码来实现吧：
首先写出HTML结构：

 <div id="box">
    <div class="show">
        <img src="./images/1.jpg" alt="#">
        <div class="drag"></div>
    </div>
    <div class="magnify"></div>
    <ul>
        <li class="active"><img src="./images/1.small.jpg" alt="#"></li>
        <li><img src="./images/2.small.jpg" alt="#"></li>
    </ul>
</div>

<script type="text/javascript" src="./javascript/mgfyGlass.js"></script>

<script>
    const oBox = document.querySelector('#box');
    
    const imgArr = [
        {
    small: '1.small.jpg', normal: '1.jpg', big: '1.big.jpg'},
        {
    small: '2.small.jpg', normal: '2.jpg', big: '2.big.jpg'}
    ];
</script>

然后加入css样式：

body,div,ul,li{
   
    margin: 0; padding: 0;
    list-style: none;
    font-size: 0;
}
img{
   
    display: block;
}
#box{
   
    width: 650px;
    position: relative;
    margin