效果图

代码演示

window.addEventListener('load', function () {
    // 大盒子
    var preview = document.querySelector('.preview_img');
    // 大图盒子
    var big = document.querySelector('.big');
    // 大图
    var bigImg = document.querySelector('.bigImg');
    // 遮罩层
    var mask = document.querySelector('.mask');

    // 鼠标移入盒子，让遮罩层跟大图显示
    preview.addEventListener('mouseover', function () {
        big.style.display = 'block';
        mask.style.display = 'block';
    })
    // 鼠标移出盒子，让遮罩层跟大图隐藏
    preview.addEventListener('mouseout', function () {
        big.style.display = 'none';
        mask.style.display = 'none';
    })

    // 核心功能
    preview.addEventListener('mousemove', function (e) {
        // 求鼠标在父盒子内的坐标并且使鼠标在遮罩层中间位置
        var x = (e.pageX - this.offsetLeft) - (mask.offsetWidth / 2);
        var y = (e.pageY - this.offsetTop) - (mask.offsetWidth / 2);

        // 用大盒子减去遮罩层盒子的宽度得出最大可移动距离
        var maskMax = this.offsetWidth - mask.offsetWidth;

        // 使遮罩层在大盒子内，不让他出去
        if (x < 0) {
            x = 0;
        } else if (x > maskMax) {
            x = maskMax;
        }

        if (y < 0) {
            y = 0;
        } else if (y > maskMax) {
            y = maskMax;
        }

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

        // 控制右侧大图移动
        // 思路：遮罩层最大移动距离是100，而大图最大移动距离是300，也就是说让遮罩层移动1px那么大图就要移动3px。
        bigImg.style.left = -x * 3 + 'px'; //这里的结果一定要是负数，因为遮罩层跟大图要相反方向移动才是我们想要的效果
        bigImg.style.top = -y * 3 + 'px';

        
        // 还有一种方法，可以用公式来做：
        // 先用大图的宽度减去大盒子的宽度求出右侧大图最大移动距离
        // var bigMax = bigImg.offsetWidth - big.offsetWidth;

        // // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // var bigX = x * bigMax / maskMax;
        // var bigY = y * bigMax / maskMax;
        // bigImg.style.left = -bigX + 'px';
        // bigImg.style.top = -bigY + 'px';
    })
})

源文件
京东放大镜效果.zip