jquery商品图片放大镜特效

基础概念

jQuery商品图片放大镜特效是一种常见的网页交互功能，用于在用户鼠标悬停在商品图片上时，显示该图片的放大区域，以便用户可以更清晰地查看商品的细节。这种效果通常通过HTML、CSS和JavaScript（特别是jQuery库）来实现。

类型

固定放大镜：放大镜窗口固定在图片的某个位置，随着鼠标的移动而显示不同的放大区域。
跟随放大镜：放大镜窗口跟随鼠标移动，始终显示鼠标当前位置的放大区域。

应用场景

这种特效广泛应用于电子商务网站、在线购物平台、产品展示页面等，帮助用户更好地了解商品细节。

实现示例

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

HTML

<div class="magnifier">
    <img src="product.jpg" alt="Product Image" class="product-image">
    <div class="magnifier-lens"></div>
    <div class="magnifier-preview"></div>
</div>

CSS

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

.product-image {
    width: 300px;
    height: 300px;
}

.magnifier-lens {
    position: absolute;
    display: none;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-repeat: no-repeat;
    cursor: crosshair;
}

.magnifier-preview {
    position: absolute;
    display: none;
    top: 0;
    left: 100%;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background-repeat: no-repeat;
}

JavaScript (jQuery)

$(document).ready(function() {
    var $productImage = $('.product-image');
    var $magnifierLens = $('.magnifier-lens');
    var $magnifierPreview = $('.magnifier-preview');
    var ratio = $productImage.width() / $magnifierPreview.width();

    $productImage.hover(function() {
        $magnifierLens.fadeIn(500);
        $magnifierPreview.fadeIn(500);
    }, function() {
        $magnifierLens.fadeOut(500);
        $magnifierPreview.fadeOut(500);
    });

    $productImage.on('mousemove', function(e) {
        var offset = $(this).offset();
        var x = e.pageX - offset.left;
        var y = e.pageY - offset.top;

        var lensX = x - $magnifierLens.width() / 2;
        var lensY = y - $magnifierLens.height() / 2;

        if (lensX < 0) lensX = 0;
        if (lensY < 0) lensY = 0;
        if (lensX > $productImage.width() - $magnifierLens.width()) lensX = $productImage.width() - $magnifierLens.width();
        if (lensY > $productImage.height() - $magnifierLens.height()) lensY = $productImage.height() - $magnifierLens.height();

        $magnifierLens.css({
            left: lensX,
            top: lensY
        });

        var previewX = -lensX * ratio;
        var previewY = -lensY * ratio;

        $magnifierPreview.css({
            backgroundPosition: previewX + 'px ' + previewY + 'px'
        });
    });
});