当前位置：首页 > jquery

jquery 放大镜

2026-03-16 10:55:15jquery

jQuery 放大镜插件实现

jQuery 放大镜功能常用于电商网站展示商品细节。以下是实现该功能的两种常见方法：

jquery 放大镜

使用现有插件（如jQuery Zoom）

引入jQuery和插件库后，通过简单配置即可实现：

jquery 放大镜

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.zoom.min.js"></script>

<img id="product-image" src="product.jpg" width="400" data-zoom-image="product-large.jpg">

$(document).ready(function(){
    $('#product-image').zoom();
});

插件会自动处理鼠标悬停时的放大效果，需准备一张高分辨率图片作为data-zoom-image。

自定义实现放大镜效果

通过监听鼠标事件动态计算放大区域：

<div class="image-container">
    <img src="product-small.jpg" id="small-image">
    <div class="zoom-lens"></div>
</div>
<div class="zoom-result"></div>

.image-container { 
    position: relative;
    width: 400px;
}
.zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 100px;
    height: 100px;
    display: none;
}
.zoom-result {
    position: absolute;
    left: 420px;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    background-repeat: no-repeat;
    display: none;
}

$(document).ready(function(){
    var lens = $(".zoom-lens");
    var result = $(".zoom-result");
    var smallImage = $("#small-image");
    var largeImage = new Image();
    largeImage.src = "product-large.jpg";

    smallImage.mousemove(function(e){
        var pos = $(this).offset();
        var x = e.pageX - pos.left;
        var y = e.pageY - pos.top;

        // 防止镜片超出图像边界
        x = Math.min(Math.max(0, x - 50), smallImage.width() - 100);
        y = Math.min(Math.max(0, y - 50), smallImage.height() - 100);

        lens.css({
            left: x + 'px',
            top: y + 'px',
            display: 'block'
        });

        result.css({
            'background-image': 'url(' + largeImage.src + ')',
            'background-position': (-x*2) + 'px ' + (-y*2) + 'px',
            display: 'block'
        });
    }).mouseleave(function(){
        lens.hide();
        result.hide();
    });
});