jquery商品图片放大镜特效

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

.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;
}

$(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'
        });
    });
});