鼠标移动时用圆形遮罩显示上层图片的实现问题

核心问题分析 #

你的上层图片#upper-image是绝对定位在.circle内部的，所以当.circle移动时，图片会跟着一起移动，导致始终显示图片的左上角区域。要实现鼠标位置对应上层图片的对应区域，需要让上层图片固定在容器中，同时根据.circle的位置反向偏移图片，让.circle的可视区域匹配鼠标位置。

修改后的完整代码 #

HTML（结构不变，确保两张图片尺寸一致）

<div class="container">
    <img id="lower-image" src="lower.png" width="1920" height="1280">
    <div class="circle"> 
        <img id="upper-image" src="upper.png" width="1920" height="1280">
    </div>
</div>

CSS

.container {
    position: relative;
    overflow: hidden;
    /* 限制容器尺寸和图片一致，避免溢出 */
    width: 1920px;
    height: 1280px;
}

#lower-image {
    position: relative;
    z-index: 1;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* 添加渐变遮罩，实现边缘模糊效果 */
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    z-index: 2;
    /* 避免遮罩层干扰鼠标事件 */
    pointer-events: none;
}

#upper-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /* 禁止图片拖动 */
    user-select: none;
}

JavaScript

(function() {
    const container = document.querySelector('.container');
    const circle = document.querySelector('.circle');
    const upperImage = document.getElementById('upper-image');
    const circleRadius = circle.offsetWidth / 2;

    container.addEventListener('mousemove', function(e) {
        // 计算鼠标在容器内的相对坐标
        const containerRect = container.getBoundingClientRect();
        const mouseX = e.clientX - containerRect.left;
        const mouseY = e.clientY - containerRect.top;

        // 设置circle的位置，让圆心跟随鼠标
        circle.style.left = `${mouseX - circleRadius}px`;
        circle.style.top = `${mouseY - circleRadius}px`;

        // 反向偏移上层图片，让circle内显示对应鼠标位置的区域
        upperImage.style.left = `${-(mouseX - circleRadius)}px`;
        upperImage.style.top = `${-(mouseY - circleRadius)}px`;
    });

    // 鼠标离开容器时隐藏circle
    container.addEventListener('mouseleave', function() {
        circle.style.left = '-9999px';
        circle.style.top = '-9999px';
    });
})();

关键修改点说明 #

1. 定位调整：

   • 将.circle改为绝对定位，相对于.container，确保它在图片上方移动。
   • #upper-image改为绝对定位相对于.container，固定在容器内，不再跟随.circle移动。

2. 反向偏移逻辑：

   • 计算鼠标在容器内的相对位置，设置.circle的位置让圆心对齐鼠标。
   • 给#upper-image设置负的偏移量，偏移值等于.circle的位置，这样.circle的可视区域正好对应鼠标在图片上的位置。

3. 渐变遮罩效果：

   • 使用mask-image（兼容-webkit前缀）实现圆形渐变遮罩，让上层图片的显示边缘有模糊过渡，匹配需求中的效果。

4. 交互优化：

   • 监听容器的mousemove事件，避免鼠标在页面其他区域触发移动。
   • 鼠标离开容器时隐藏遮罩，恢复初始仅显示下层图片的状态。

内容的提问来源于stack exchange，提问作者Christoph13524