放大镜效果

核心原理
1、鼠标经过遮罩层显示，离开隐藏；
2、移动鼠标遮罩层跟随，鼠标超出大盒子后遮罩层不跟随出框；
3、移动遮罩层时，大图片也跟随移动（改变定位）；
JS

 // 1、鼠标经过图片盒子，big盒子显示，黄色盒子出现；
    var preview = document.querySelector('.preview');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    preview.addEventListener('mouseenter',function(){
        big.style.display = 'block';
        mask.style.display = 'block';
    })
    preview.addEventListener('mouseleave',function(){
        big.style.display = 'none';
        mask.style.display = 'none';
        
    })
    // 移动鼠标mask跟随，把鼠标在盒子内的坐标给mask；
    // 先获取鼠标在盒子内的坐标；
    preview.addEventListener('mousemove',function(e){
        // 鼠标离页面距离-盒子离页面距离=鼠标离盒子距离；
        var x = e.pageX - preview.offsetLeft;
        var y = e.pageY - preview.offsetTop;

        // 遮罩层的定位变量
        // mask.offsetWidth/2让鼠标在盒子水平垂直居中；
        maskx = x - mask.offsetWidth/2;
        masky = y - mask.offsetHeight/2;
        // 为了让遮罩层只在盒子内移动写的判断；
        // 当maskx超过了最大移动尺寸（图片盒子-遮罩层），则为100,最小尺寸为0；
               
        // 遮挡层的最大移动距离；
        var maskMax =  preview.offsetWidth - mask.offsetWidth;
        if(maskx <= 0){
                maskx = 0;
        } else if (maskx >maskMax){
            maskx = maskMax;
        }
        // 再写masky的判断；
        if(masky <= 0){
                masky = 0;
        } else if (masky > maskMax){
            masky = maskMax;
        }
        mask.style.left = maskx + 'px';
        mask.style.top = masky + 'px';

        // 大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图；
        var bigImg = document.querySelector('.bigImg');
        // 大图最大移动距离= 大图宽度-大图盒子宽度；（298）
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        // 大图x的移动距离= 遮罩定位 * 大图最大移动距离（298） / 遮罩最大移动距离（100）
        var bigx = maskx * bigMax / maskMax;
        var bigy = masky * bigMax / maskMax; 
        console.log(bigx,bigy);

        bigImg.style.left =  - bigx +'px';
        bigImg.style.top =  - bigy +'px';

CSS

    .preview {
        position: relative;
        height: 400px;
        width: 400px;
        border: 1px #ccc solid;
    }
    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 300px;
        background-color: #ffd847;
        opacity: .5;/*半透明*/
        cursor: move;/*鼠标经过显示移动图标*/
    }
    .big {
        display: none;
        position: absolute;
        top: 0;
        left: 410px;
        width: 500px;
        height: 500px;
        /* background-color: pink; */
        border: 1px #ccc solid;
        overflow: hidden;
    }
    .bigImg {
        position: absolute;
        top: 0;
        left: 0;
    }

HTML

    <div class="preview">
        <img src="./img400.jpg" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="./img800.jpg" alt="" class="bigImg">
        </div>
    </div>