JS实现放大镜功能

我是看完教学视频做的，一开始发现自己能实现放大，但有个小bug：显示的位置不大对应，原因：mask，box(=小图的宽)，big，bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符。

它主要有2个比例关系：

   //放大显示区域的对应比例=====在CSS里设置
   mask的宽 / box的宽 = big的宽 / bImg的宽
   
   //大图对应移动（鼠标右移，大图左移）， 计算大小图之间的比例 =====在JS里写
   mask的移动距离（x） / 大图的移动距离（要求的） = mask的横向最大移动距离（small.offsetWidth - mask.offsetWidth） / 大图的横向最大移动距离（bImg.offsetWidth - big.offsetWidth）

代码：

<style>
        /*****mask，box(=小图的宽),big,bImg的宽不能随便设置，需按照比例，否则mask覆盖区域与显示出的大图区域不符********/
        /*** mask的宽 / box的宽 = big的宽 / bImg的宽 ***/
        *{
            padding: 0;
            margin:0;
        }
        #box{
            width: 400px;
            height: 225px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }
        #small{
            position: relative;
        }
        #small img{
            width: 400px;
            height:100%;
        }
        #mask{
            width: 200px;
            height: 120px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        #big{
            position: absolute;
            top: 0;
            left: 560px;
            width: 400px;
            height: 225px;
            overflow: hidden;
            display: none;
            border: 1px solid  #ccc;
        }
        #big img{
            width: 800px;
        }
    </style>

<div id="box">
    <div id="small">
        <img src="images/00.jpg" alt="">
        <div id="mask"></div><!--放大区域-->
    </div>
    <div id="big">
        <img id="b-img" src="images/00.jpg" alt="">
    </div>
</div>
<script>
    var box =document.getElementById("box");
    var small=document.getElementById("small");
    var mask=document.getElementById("mask");
    var big=document.getElementById("big");
    var bImg=document.getElementById("b-img");

    //鼠标进入small，显示mask+big的div
    box.function(e){
        mask.style.display="block";
        big.style.display="block";
    }

    //鼠标离开small，隐藏mask+big
    small.function(){
        mask.style.display="none";
        big.style.display="none";
    }


    //鼠标移动，mask也动
    small.onmousemove = function (e) {
        //鼠标此时的可视区域的横坐标和纵坐标
        //主要是设置鼠标在遮挡层的中间显示    100是margin
        var x = e.clientX - mask.offsetWidth / 2-100;
        var y = e.clientY - mask.offsetHeight / 2-100;

        //设置mask的边界限制，不让它超出small这个div
        //横坐标的最小值
        x = x < 0 ? 0 : x;
        //纵坐标的最小值
        y = y < 0 ? 0 : y;
        //横坐标最大值
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        //纵坐标最大值
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

        mask.style.left=x+"px";
        mask.style.top=y+"px";

        //大图对应移动（鼠标右移，大图左移）
        //计算大小图之间的比例
        //mask的移动距离（x） / 大图的移动距离（?） = mask的横向最大移动距离（small.offsetWidth - mask.offsetWidth） / 大图的横向最大移动距离（bImg.offsetWidth - big.offsetWidth）

        //大图移动的距离
        var bX=x*(bImg.offsetWidth - big.offsetWidth)/(small.offsetWidth - mask.offsetWidth);
        var bY=y*(bImg.offsetWidth - big.offsetWidth)/(small.offsetWidth - mask.offsetWidth);

        //大图的移动（方向相反，故取负值）
        bImg.style.marginLeft=-bX+"px";
        bImg.style.marginTop=-bY+"px";
    }


</script>

效果图：