品优购商品详情页遮盖层效果

mask的x最大活动距离如下图：

JS代码实现

// 1.找到显示效果的元素对象
var previewImg = document.querySelector('.preview_img');
var mask = document.querySelector('.mask')
var big = document.querySelector('.big')

// 功能1：鼠标进入商品图像区间，mask和big就显示出来,鼠标离开，则mask和big隐藏起来
previewImg.addEventListener('mouseover', function () {
    mask.style.display = 'block';
    big.style.display = 'block';
})
previewImg.addEventListener('mouseout', function () {
    mask.style.display = 'none';
    big.style.display = 'none';
})

// 功能2：鼠标在商品图像区间移动，遮罩层随着移动
previewImg.addEventListener('mousemove', (e) => {
    // (1).计算鼠标在图片盒子中的位置
    // 鼠标在页内的坐标-盒子距离左侧和上边的距离
    let x = e.pageX - previewImg.offsetLeft;
    let y = e.pageY - previewImg.offsetTop;

    // 把遮罩层盒子往上走高度一半，往左走宽度一半
    // 实现鼠标在遮罩层居中
    var maskx = x - mask.offsetWidth / 2
    var masky = y - mask.offsetHeight / 2
    // mask在x轴的最大距离
    // 小盒子宽度-大盒子宽度
    var maskMaxX = previewImg.offsetWidth - mask.offsetWidth;
    var maskMaxY = previewImg.offsetHeight - mask.offsetHeight
    // 如果x的坐标小于0就让她停在0的位置
    if (maskx <= 0) {
        maskx = 0;
    } else if (maskx >= maskMaxX) {
        maskx = maskMaxX;
    }
    // 如果y的坐标小于0就让她停在0的位置
    if (masky <= 0) {
        masky = 0;
    } else if (masky >= maskMaxY) {
        masky = maskMaxY;
    }
    // (2)将鼠标在盒子中间的位置赋值给遮罩层的x和y坐标
    mask.style.left = maskx + 'px'
    mask.style.top = masky + 'px'

    // 功能3：大图像的x和y随着遮罩层的位置移动而移动
    // 按照一定比例来移动，最大移动距离的比例就是移动的比例
    // maskx/maskMakX = bigx /bigMax
    var bigImg = document.querySelector('.bigImg')
    var bigMax = big.offsetWidth - bigImg.offsetWidth;
    var bigx = maskx * bigMax / maskMaxX
    var bigy = masky * bigMax / maskMaxY

    // 设置大图形的x和y坐标
    bigImg.style.left = bigx + 'px';
    bigImg.style.top = bigy + 'px';

})