商品盒子放大镜效果, js代码

document.addEventListener('DOMContentLoaded', function () {
 //获取大盒子
    var preview_img = document.querySelector('.preview_img');
    //获取遮罩层
    var mask = document.querySelector('.mask');
    //获取放大的盒子
    var big = document.querySelector('.big');
    //获取大盒子里面的图片
    let bigImg = document.querySelector('.bigImg')
    console.log(bigImg);
    //先设置鼠标经过 让 遮罩层和放大图显示出来

    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    //获取鼠标在盒子内的位置
    preview_img.addEventListener('mousemove', function (e) {
        let x = e.pageX - preview_img.offsetLeft;
        let y = e.pageY - preview_img.offsetTop;
        //然后把鼠标坐标赋值给遮罩层
        let maskX = x - mask.offsetWidth / 2;
        let maskY = y - mask.offsetHeight / 2;
        //maskMax 得出的就是遮罩层的最大移动距离 因为遮罩层是正方形,所以 x,y的最大移动距离都可以使用这个距离变量 
        let maskMax = preview_img.offsetWidth - mask.offsetWidth;
        //不让遮罩层超出盒子范围 就判断 如果x,y坐标小于0的时候 让他等于0 卡在0的位置
        if (maskX <= 0) {
            maskX = 0;
            //用大盒子的宽度 减去遮罩层的宽度 得到的就是 X最大的移动距离 
            //如果移动距离超过最大移动距离 就卡在最大移动距离的位置
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        }
        else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        //鼠标坐标赋值给遮罩层;遮罩层就会跟随鼠标移动了 鼠标位置在遮罩层最中心;
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图片的移动距离 =遮挡层的移动距离 * 大图片最大移动距离 /遮挡层最大移动距离
        //bigMax 就是大盒子的宽减去大图片的宽 得出的就是大图片的最大移动距离;
        let bigMax = big.offsetWidth - bigImg.offsetWidth;
        //得出大图片X,Y轴的 最大移动距离  然后赋值给 大图片的 left 和 Top;
        //maskX 是遮罩层的移动距离 bigMax是大图片最大移动距离 然后除以 maskMax 遮挡曾层的最大移动距离;   就得出 大图片x轴的移动距离  之后把这个移动距离赋值给大图片
        let bigX = maskX * bigMax / maskMax;
        let bigY = maskY * bigMax / maskMax;
        bigImg.style.left = bigX + 'px';
        bigImg.style.top = bigY + 'px';
    })