jquery图片放大

jQuery 图片放大实现方法

使用 jQuery 插件实现图片放大

jQuery Zoom 是一个常用的图片放大插件，支持悬停或点击放大效果。

安装插件：

<script src="https://cdn.jsdelivr.net/npm/jquery-zoom@1.7.21/jquery.zoom.min.js"></script>

基本用法：

<img id="zoom-image" src="small.jpg" data-zoom-image="large.jpg"/>
<script>
$(document).ready(function(){
    $('#zoom-image').zoom();
});
</script>

自定义实现图片放大效果

创建放大镜效果：

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

<style>
.image-container {
    position: relative;
}
.zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    width: 100px;
    height: 100px;
    display: none;
}
.zoom-result {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid #d4d4d4;
    display: none;
}
</style>

<script>
$(document).ready(function(){
    var lens = $(".zoom-lens");
    var result = $(".zoom-result");
    var img = $("#target-image");

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

        lens.css({
            "left": x - 50,
            "top": y - 50,
            "display": "block"
        });

        result.css({
            "background-image": "url('" + img.attr("src") + "')",
            "background-position": (-(x * 2 - 100)) + "px " + (-(y * 2 - 100)) + "px",
            "display": "block"
        });
    });

    img.on("mouseleave", function(){
        lens.hide();
        result.hide();
    });
});
</script>

响应式图片放大解决方案

使用 jQuery 和 CSS 实现响应式放大：

$('.zoomable-image').on('click', function() {
    var $img = $(this);
    var originalSrc = $img.attr('src');

    $('body').append(
        '<div class="zoom-overlay">' +
        '<img src="' + originalSrc + '" class="zoomed-image">' +
        '<span class="close-zoom">×</span>' +
        '</div>'
    );

    $('.close-zoom').on('click', function() {
        $('.zoom-overlay').remove();
    });
});

<style>
.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.zoomed-image {
    max-width: 90%;
    max-height: 90%;
}
.close-zoom {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}
</style>

移动端触摸放大实现

针对移动设备的双指缩放：

$('#touch-image').on('touchstart', function(e) {
    if (e.originalEvent.touches.length === 2) {
        initialDistance = getTouchDistance(e);
    }
});

$('#touch-image').on('touchmove', function(e) {
    if (e.originalEvent.touches.length === 2) {
        e.preventDefault();
        var currentDistance = getTouchDistance(e);
        var scale = currentDistance / initialDistance;
        $(this).css('transform', 'scale(' + scale + ')');
    }
});

function getTouchDistance(e) {
    var touch1 = e.originalEvent.touches[0];
    var touch2 = e.originalEvent.touches[1];
    return Math.hypot(
        touch2.pageX - touch1.pageX,
        touch2.pageY - touch1.pageY
    );
}