个人风格是 es5 为主，目前在学习 es6 所以看上去代码有点怪怪的，但反正只有一个我看而已。=v=

//获取对应的变量
let box = document.querySelector('.box');
let smallBox = document.querySelector('.small-box'); //小盒子
let bigBox = document.querySelector('.big-box'); //大盒子
let mask = document.querySelector('.mask'); //蒙板
let bigBoxImg = document.querySelector('.big-box>img'); //大盒子的图片

smallBox.onmouseenter = function () {
    bigBox.style.display = 'block';
        mask.style.display = 'block';

        //蒙版在小盒子里面移动
        document.onmousemove = function (e) {
        //兼容处理
            let event = e || window.event;
        //计算坐标
        let x = event.clientX - box.offsetLeft - mask.offsetWidth/2;
            let y = event.clientY - box.offsetTop - mask.offsetHeight/2;
        //边界判断
            if(x<0){
                x= 1;
            }else if(x >= smallBox.offsetWidth - mask.offsetWidth-1){
                x = smallBox.offsetWidth - mask.offsetWidth-1
            }
            if(y<0){
                y = 1;
            }else if (y>= smallBox.offsetHeight - mask.offsetHeight-1){
                y = smallBox.offsetHeight - mask.offsetHeight-1
            }
        //边界判断<0 后x和y等于1 是为了抵消掉边框的1px。

         //蒙版移动
            mask.style.left = x +'px';
            mask.style.top = y +'px';

        //关联大盒子
        //公式： 大盒子图片的移动距离 = 蒙板移动的距离/小盒子的宽度（高度） * 大盒子的宽度（高度）
            bigBoxImg.style.left = -x /smallBox.offsetWidth * bigBox.offsetWidth +'px';
            bigBoxImg.style.top = -y /smallBox.offsetHeight* bigBox.offsetHeight +'px';

        }
    };

    console.log(bigBoxImg.style.left);

    smallBox.onmouseleave = function () {
        console.log(456);
        bigBox.style.display = 'none';
        mask.style.display = 'none';
        document.onmousemove = null;
    }