js做淘宝放大镜效果怎么做

淘宝的放大镜效果是一种常见的前端交互设计，用于在用户鼠标悬停在商品图片上时显示该商品的细节放大视图。以下是实现这一效果的基础概念和步骤：

基础概念

HTML结构：需要两个图片容器，一个用于显示原始商品图片，另一个用于显示放大的细节。
CSS样式：使用CSS来设置容器的布局和样式，以及放大镜效果的视觉效果。
JavaScript逻辑：编写脚本来处理鼠标移动事件，实时更新放大镜中的图像位置和缩放比例。

实现步骤

HTML

<div class="magnifier">
    <div class="small-box">
        <img src="small.jpg" alt="Small Image" id="smallImage">
        <div class="lens"></div>
    </div>
    <div class="large-box">
        <img src="large.jpg" alt="Large Image" id="largeImage">
    </div>
</div>

CSS

.magnifier {
    position: relative;
    display: inline-block;
}

.small-box {
    position: relative;
    overflow: hidden;
}

.small-box img {
    width: 100%;
}

.lens {
    position: absolute;
    width: 100px; /* 放大镜宽度 */
    height: 100px; /* 放大镜高度 */
    background-color: rgba(255, 255, 255, 0.4);
    cursor: none;
    display: none;
}

.large-box {
    position: absolute;
    top: 0;
    right: -100%; /* 放大镜图片位于小图右侧 */
    width: 300px; /* 放大镜图片宽度 */
    height: 300px; /* 放大镜图片高度 */
    overflow: hidden;
}

.large-box img {
    position: absolute;
    width: auto;
    height: auto;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const smallImage = document.getElementById('smallImage');
    const largeImage = document.getElementById('largeImage');
    const lens = document.querySelector('.lens');

    smallImage.addEventListener('mousemove', moveLens);
    lens.addEventListener('mousemove', moveLens);

    function moveLens(e) {
        e.preventDefault();
        const pos = getCursorPos(e);
        let x = pos.x - (lens.offsetWidth / 2);
        let y = pos.y - (lens.offsetHeight / 2);

        if (x > smallImage.width - lens.offsetWidth) {
            x = smallImage.width - lens.offsetWidth;
        }
        if (x < 0) {
            x = 0;
        }
        if (y > smallImage.height - lens.offsetHeight) {
            y = smallImage.height - lens.offsetHeight;
        }
        if (y < 0) {
            y = 0;
        }

        lens.style.left = x + 'px';
        lens.style.top = y + 'px';

        largeImage.style.transform = `translate(-${x * 3}px, -${y * 3}px)`; // 假设放大倍数为3
    }

    function getCursorPos(e) {
        let a = smallImage.getBoundingClientRect();
        return {
            x: e.pageX - a.left - window.pageXOffset,
            y: e.pageY - a.top - window.pageYOffset
        };
    }

    smallImage.addEventListener('mouseenter', () => {
        lens.style.display = 'block';
    });

    smallImage.addEventListener('mouseleave', () => {
        lens.style.display = 'none';
    });
});