jquery 放大镜

jQuery 放大镜实现方法

使用 jQuery 实现放大镜效果可以通过监听鼠标移动事件，动态调整放大区域的显示。以下是具体实现步骤：

基本结构

HTML 结构需要包含原图容器和放大镜容器：

<div class="image-container">
    <img src="original.jpg" id="original-image">
    <div class="magnifier"></div>
</div>
<div class="zoomed-image">
    <img src="large.jpg" id="large-image">
</div>

CSS 样式

设置放大镜和放大区域的样式：

.image-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.magnifier {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #ccc;
    background-color: rgba(255, 255, 255, 0.3);
    display: none;
}
.zoomed-image {
    width: 400px;
    height: 300px;
    overflow: hidden;
    display: none;
}

jQuery 代码

实现鼠标移动时放大镜效果：

$(document).ready(function() {
    var $original = $('#original-image');
    var $magnifier = $('.magnifier');
    var $zoomed = $('#large-image');
    var zoomFactor = 2; // 放大倍数

    $original.on('mousemove', function(e) {
        // 显示放大镜
        $magnifier.show();
        $zoomed.parent().show();

        // 计算放大镜位置
        var offset = $original.offset();
        var x = e.pageX - offset.left - $magnifier.width() / 2;
        var y = e.pageY - offset.top - $magnifier.height() / 2;

        // 限制边界
        x = Math.max(0, Math.min(x, $original.width() - $magnifier.width()));
        y = Math.max(0, Math.min(y, $original.height() - $magnifier.height()));

        // 更新放大镜位置
        $magnifier.css({
            left: x + 'px',
            top: y + 'px'
        });

        // 计算放大区域
        var zoomX = x * zoomFactor;
        var zoomY = y * zoomFactor;

        // 更新放大图像位置
        $zoomed.css({
            marginLeft: -zoomX + 'px',
            marginTop: -zoomY + 'px'
        });
    });

    $original.on('mouseleave', function() {
        $magnifier.hide();
        $zoomed.parent().hide();
    });
});

参数说明

1. zoomFactor：控制放大倍数，数值越大放大效果越明显。
2. $magnifier：放大镜的尺寸通过 CSS 中的 width 和 height 调整。
3. 边界限制：确保放大镜不会移出原图范围。

注意事项

1. 需要准备两张图片：原图（original.jpg）和高清大图（large.jpg）。
2. 高清大图的尺寸应为原图的 zoomFactor 倍，否则会出现空白区域。
3. 如果需要对动态加载的图片实现放大镜，需确保图片完全加载后再绑定事件。

扩展功能

1. 圆形放大镜：通过 CSS 的 border-radius: 50% 将放大镜改为圆形。
2. 动态放大倍数：通过滑块控件动态调整 zoomFactor。
3. 多图切换：结合选项卡实现不同图片的放大镜效果。