实现代码:

<!DOCTYPE html>
<html>

<body>
    <main>
        <div class="zoom">
            <img src="" class="zoom-image">
        </div>
    </main>

    <script>
        const zoomElement = document.querySelector('.zoom');
        const zoomImage = document.querySelector('.zoom-image');
        let scale = 2; // 默认放大倍数

        // 鼠标移动时动态调整缩放中心
        zoomElement.addEventListener('mousemove', (event) => {
            const rect = zoomElement.getBoundingClientRect();
            const mouseX = event.clientX - rect.left; // 鼠标相对容器的X坐标
            const mouseY = event.clientY - rect.top;  // 鼠标相对容器的Y坐标

            // 计算鼠标相对容器的百分比位置
            const originX = (mouseX / rect.width) * 100;
            const originY = (mouseY / rect.height) * 100;

            // 动态调整图片的缩放中心
            zoomImage.style.transformOrigin = `${originX}% ${originY}%`;

            // 设置图片的缩放效果
            zoomImage.style.transform = `scale(${scale})`;
        });

        // 鼠标移出时恢复原始缩放
        zoomElement.addEventListener('mouseleave', () => {
            zoomImage.style.transform = `scale(1)`;
            zoomImage.style.transformOrigin = `50% 50%`; // 恢复为居中
        });
    </script>

    <style>
        .zoom {
            position: relative;
            max-width: 90vw;
            /* 根据视口宽度进行自适应 */
            height: auto;
            border: 6px solid white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .zoom-image {
            width: 100%;
            height: auto;
            /* 保持原始比例 */
            object-fit: contain;
            /* 确保图片完整显示且比例合适 */
            transition: transform 0.1s ease-in-out, transform-origin 0.1s ease-in-out;
            transform-origin: 50% 50%;
        }
    </style>
</body>

</html>

代码解读

这个网页代码实现了一个图片放大镜的效果，当用户将鼠标悬停在图片上时，图片会放大，并且放大的中心随着鼠标的移动而动态调整。当鼠标移出图片时，图片恢复为原始大小。下面是对代码的详细解读：

JavaScript 部分：

const zoomElement = document.querySelector('.zoom');
const zoomImage = document.querySelector('.zoom-image');
let scale = 2; // 默认放大倍数

// 鼠标移动时动态调整缩放中心
zoomElement.addEventListener('mousemove', (event) => {
    const rect = zoomElement.getBoundingClientRect();
    const mouseX = event.clientX - rect.left; // 鼠标相对容器的X坐标
    const mouseY = event.clientY - rect.top;  // 鼠标相对容器的Y坐标

    // 计算鼠标相对容器的百分比位置
    const originX = (mouseX / rect.width) * 100;
    const originY = (mouseY / rect.height) * 100;

    // 动态调整图片的缩放中心
    zoomImage.style.transformOrigin = `${originX}% ${originY}%`;

    // 设置图片的缩放效果
    zoomImage.style.transform = `scale(${scale})`;
});

// 鼠标移出时恢复原始缩放
zoomElement.addEventListener('mouseleave', () => {
    zoomImage.style.transform = `scale(1)`;
    zoomImage.style.transformOrigin = `50% 50%`; // 恢复为居中
});

  1. 变量定义：

    • zoomElement：通过 document.querySelector 获取 .zoom 容器。
    • zoomImage：获取图片 .zoom-image 元素。
    • scale：定义了默认的放大倍数为 2。

  2. 鼠标移动事件 (mousemove)：

    • 当鼠标在 .zoom 容器内移动时，触发此事件。
    • rect：获取 .zoom 容器的边界矩形信息（如位置和大小）。
    • mouseX 和 mouseY：通过事件对象 event 来计算鼠标相对容器的 X 和 Y 坐标。
    • originX 和 originY：将鼠标位置的相对坐标转换为百分比，用于确定图片的缩放中心。
    • 通过 transformOrigin 属性调整图片的缩放中心，使放大的部分与鼠标移动同步。
    • 通过 transform: scale(2) 设置图片的缩放倍数（此处是放大两倍）。

  3. 鼠标移出事件 (mouseleave)：

    • 当鼠标移出 .zoom 容器时，触发此事件。
    • 图片缩放倍数恢复为 1，即原始大小。
    • 缩放中心也恢复为图片的中心 50% 50%。

CSS 样式部分：

.zoom {
    position: relative;
    max-width: 90vw; /* 根据视口宽度进行自适应 */
    height: auto; 
    border: 6px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.zoom-image {
    width: 100%;
    height: auto; /* 保持原始比例 */
    object-fit: contain; /* 确保图片完整显示且比例合适 */
    transition: transform 0.1s ease-in-out, transform-origin 0.1s ease-in-out;
    transform-origin: 50% 50%;
}

  1. .zoom 样式：

    • position: relative：将 .zoom 容器设为相对定位，确保内部元素可以使用绝对定位。
    • max-width: 90vw：容器宽度最大为视口宽度的 90%，自适应不同设备的屏幕。
    • height: auto：自动调整高度，使其与宽度比例保持一致。
    • border 和 box-shadow：设置白色边框和阴影效果，给容器增加视觉层次感。
    • overflow: hidden：当图片放大时，超出容器的部分将被隐藏。

  2. .zoom-image 样式：

    • width: 100% 和 height: auto：让图片的宽度填满容器，并根据其比例自动调整高度。
    • object-fit: contain：保证图片在容器内完整显示，并保持其宽高比，不会被裁剪。
    • transition：为 transform 和 transform-origin 添加动画效果，使缩放和平滑过渡更加流畅。
    • transform-origin: 50% 50%：默认缩放中心是图片的正中间。

实现效果