图片放大镜特效js

图片放大镜特效是一种常见的前端交互效果，它允许用户在查看图片时，通过移动鼠标或触摸屏幕来查看图片的放大区域。这种效果通常用于电商网站的产品展示、地图应用等场景，以提高用户体验和产品的细节展示。

基础概念

图片放大镜特效通过以下几个步骤实现：

监听鼠标事件：当用户将鼠标悬停在图片上时，触发放大镜效果。
计算放大区域：根据鼠标的位置确定放大镜显示的区域。
显示放大镜：在鼠标位置显示一个放大镜窗口，并在其中显示放大的图片部分。
调整放大倍数：根据需求调整放大镜中的图片放大倍数。

优势

提高用户体验：用户可以更清晰地查看图片细节。
增强产品展示：特别适用于电商等需要展示产品细节的场景。
交互性强：增加页面的互动性，吸引用户注意力。

类型

固定放大镜：放大镜窗口固定大小和形状。
可变放大镜：放大镜窗口可以根据需要调整大小和形状。
触摸支持：支持触摸屏设备，适用于移动端。

应用场景

电商产品展示
地图应用
图片编辑器
虚拟试衣间

实现示例

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大镜特效</title>
    <style>
        .img-magnifier-container {
            position: relative;
        }
        .magnifier {
            position: absolute;
            border: 3px solid #000;
            border-radius: 50%;
            cursor: none;
            display: none;
            z-index: 10;
        }
        .magnifier img {
            position: absolute;
            border-radius: 50%;
            display: none;
        }
    </style>
</head>
<body>
    <div class="img-magnifier-container">
        <img id="myimage" src="your-image.jpg" width="600" height="400">
        <div class="magnifier" id="magnifier"></div>
    </div>

    <script>
        const img = document.getElementById('myimage');
        const magnifier = document.getElementById('magnifier');

        magnifier.style.width = '100px';
        magnifier.style.height = '100px';

        const imgWidth = img.width;
        const imgHeight = img.height;
        const magnifierWidth = magnifier.offsetWidth / 2;
        const magnifierHeight = magnifier.offsetHeight / 2;

        img.addEventListener('mousemove', moveMagnifier);
        img.addEventListener('mouseleave', hideMagnifier);

        function moveMagnifier(e) {
            const x = e.pageX - img.offsetLeft - magnifierWidth;
            const y = e.pageY - img.offsetTop - magnifierHeight;

            if (x > imgWidth - magnifierWidth * 2) { x = imgWidth - magnifierWidth * 2; }
            if (x < magnifierWidth) { x = magnifierWidth; }
            if (y > imgHeight - magnifierHeight * 2) { y = imgHeight - magnifierHeight * 2; }
            if (y < magnifierHeight) { y = magnifierHeight; }

            magnifier.style.left = x + 'px';
            magnifier.style.top = y + 'px';
            magnifier.style.display = 'block';

            const bgX = -x * 2;
            const bgY = -y * 2;

            magnifier.style.backgroundImage = `url('${img.src}')`;
            magnifier.style.backgroundSize = (imgWidth * 2) + 'px ' + (imgHeight * 2) + 'px';
            magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
        }

        function hideMagnifier() {
            magnifier.style.display = 'none';
        }
    </script>
</body>
</html>