纯JS实现商品详情图放大镜效果：鼠标跟随与坐标计算

<div class="box">
        <img src="images/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="images/big.jpg" alt="">
        </div>
</div>

<style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            top: 70px;
            left: 30px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .box > img {
            height: 100%;
        }
 
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: rgba(254, 222, 79, .5);
            border: 1px solid #ccc;
            cursor: move;
            /*让鼠标的状态改成十字型*/
        }
 
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            z-index: 999;
        }
 
        .big img {
            /* 一定要给.big下的img定位属性它的位置才能随着遮罩层的移动而移动哦 */
            position: absolute;
            top: 0;
            left: 0;
        }
</style>

<script>
        window.addEventListener('load', function () {
            // 1.获取元素
            var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2.注册事件
            // (1)box鼠标经过即显示出遮罩层mask和右侧大图 onmouseover  
            box.addEventListener('mouseover', function () {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            // (2)box鼠标离开即隐藏遮罩层mask和右侧大图 onmouseout  
            box.addEventListener('mouseout', function () {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            // (3)让mask遮罩层随着鼠标移动（此事件要写在获得鼠标的情况下）
            box.addEventListener('mousemove', function (e) {
                // (1). 先计算出鼠标在盒子内的坐标，鼠标在盒子里的坐标=鼠标在屏幕中的坐标-盒子的offsetLeft/offsetTop
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) 鼠标在遮罩层中应该处于中心的位置，所以还要把鼠标从遮罩层的左上角往右往下移动遮罩层宽高的一半才行，即鼠标在盒子里的坐标减去盒子高度的一半和宽度的一半就是我们mask 的最终 left 和top值了
                var maskX = x - mask.offsetWidth / 2;   // 鼠标位置在遮罩层水平中间
                var maskY = y - mask.offsetHeight / 2;   // 鼠标位置在遮罩层垂直中间
 
                // (3) 我们mask 遮罩层水平移动的距离即maskX= 遮罩层的父盒子的宽-遮罩层的宽，而遮罩层垂直移动的距离即maskY= 遮罩层的父盒子的高-遮罩层的高
                // (4) 如果x 坐标小于了0 就让他停在0 的位置
                // 遮挡层的最大移动距离= 遮罩层的父盒子的宽-遮罩层的宽（因为此案例的遮罩层是一个正方形，所以水平和垂直的范围是一致的）
                var maskMax = box.offsetWidth - mask.offsetWidth;   // 遮罩层的最大移动距离
                // 判断限定遮罩层的可移动范围：水平可移动范围：
                maskX <= 0 ? maskX = 0 : maskX = maskX;     // 水平最小可移动范围
                maskX >= maskMax ? maskX = maskMax : maskX = maskX; // 水平最小大可移动范围
                // 判断限定遮罩层的可移动范围：垂直可移动范围：
                maskY <= 0 ? maskY = 0 : maskY = maskY;     // 垂直最小可移动范围
                maskY >= maskMax ? maskY = maskMax : maskY = maskY; // 垂直最大可移动范围
                // 将鼠标的坐标值给mask的left和top（mask是有定位的）注意要加px单位！！！
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5)让右侧大图随着遮罩层移动而移动
                // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
                // 获取大图
                var bigImg = big.querySelector('img');
                // 大图片最大移动距离
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大图片的移动距离 X Y
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 注意：1.bigImg获取到的元素需要有CSS定位属性才能移动位置的，没有定位位置是不会变的哦
                // 2.大图的移动和遮罩层移动的方向是相反的哦，因为遮罩层往左移动时实际上大图是要往右移动的，所以值是负数
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</script>