用js实现放大镜效果

放大镜效果是一种常见的网页交互设计，用于在用户鼠标悬停在某个元素上时，显示该元素的放大视图。以下是实现放大镜效果的基础概念、优势、类型、应用场景以及具体的JavaScript代码示例。

基础概念

放大镜效果通常涉及两个主要部分：

原始图像：用户鼠标悬停的图像。
放大图像：显示原始图像放大后的版本。

优势

增强用户体验：使用户能够更清晰地查看细节。
吸引注意力：通过视觉效果吸引用户的注意力。
无需额外点击：用户只需悬停即可查看放大效果，操作简便。

类型

静态放大镜：固定放大倍数和位置。
动态放大镜：根据鼠标位置动态调整放大区域和位置。

应用场景

电商网站：展示商品细节。
图片库：方便用户查看图片细节。
艺术作品展示：突出艺术作品的细节。

实现代码示例

以下是一个简单的JavaScript实现放大镜效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magnifier Effect</title>
    <style>
        .magnifier-container {
            position: relative;
            display: inline-block;
        }
        .magnifier-lens {
            position: absolute;
            border: 1px solid #000;
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
            display: none;
        }
        .magnifier-result {
            position: absolute;
            top: 0;
            left: 100%;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden;
            display: none;
        }
        .magnifier-result img {
            position: absolute;
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="magnifier-container">
        <img src="your-image.jpg" alt="Image" id="magnifier-image">
        <div class="magnifier-lens" id="magnifier-lens"></div>
        <div class="magnifier-result" id="magnifier-result">
            <img src="your-image.jpg" alt="Magnified Image" id="magnified-image">
        </div>
    </div>

    <script>
        const image = document.getElementById('magnifier-image');
        const lens = document.getElementById('magnifier-lens');
        const result = document.getElementById('magnifier-result');
        const magnifiedImage = document.getElementById('magnified-image');

        const cx = result.offsetWidth / lens.offsetWidth;
        const cy = result.offsetHeight / lens.offsetHeight;

        image.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 > image.width - lens.offsetWidth) {
                x = image.width - lens.offsetWidth;
            }
            if (x < 0) {
                x = 0;
            }
            if (y > image.height - lens.offsetHeight) {
                y = image.height - lens.offsetHeight;
            }
            if (y < 0) {
                y = 0;
            }

            lens.style.left = x + 'px';
            lens.style.top = y + 'px';
            magnifiedImage.style.left = -x * cx + 'px';
            magnifiedImage.style.top = -y * cy + 'px';

            lens.style.display = 'block';
            result.style.display = 'block';
        }

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

        image.addEventListener('mouseleave', () => {
            lens.style.display = 'none';
            result.style.display = 'none';
        });
    </script>
</body>
</html>