当前位置：首页 > jquery

jquery图片放大

2026-04-08 01:46:54jquery

使用 jQuery 实现图片放大功能

方法一：使用 CSS 和 jQuery 结合实现

通过调整 CSS 的 transform 属性实现图片放大效果，结合 jQuery 监听鼠标事件。

jquery图片放大

$(document).ready(function() {
    $('.zoomable-image').hover(
        function() {
            $(this).css('transform', 'scale(1.5)');
            $(this).css('transition', 'transform 0.3s ease');
        },
        function() {
            $(this).css('transform', 'scale(1)');
        }
    );
});

方法二：使用 jQuery 插件 zoom.js

引入 zoom.js 插件可以快速实现图片放大功能，支持鼠标悬停或点击触发。

jquery图片放大

<script src="https://cdn.jsdelivr.net/npm/jquery-zoom@1.7.21/jquery.zoom.min.js"></script>
<script>
    $(document).ready(function() {
        $('.zoomable-image').zoom();
    });
</script>

方法三：自定义放大镜效果

通过动态创建放大区域实现局部放大效果，适合需要高精度放大的场景。

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

        $(this).css('transform-origin', x + 'px ' + y + 'px');
        $(this).css('transform', 'scale(2)');
    }).on('mouseout', function() {
        $(this).css('transform', 'scale(1)');
    });
});

注意事项

确保图片的父容器有足够的空间，避免放大后内容被遮挡。
使用 transform 属性性能较好，不会触发页面重排。
插件方式适合快速实现，自定义方式适合特殊需求。

示例代码完整结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 图片放大</title>
    <style>
        .zoomable-image {
            width: 300px;
            height: auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img src="example.jpg" class="zoomable-image" alt="示例图片">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.zoomable-image').hover(
                function() {
                    $(this).css('transform', 'scale(1.5)');
                    $(this).css('transition', 'transform 0.3s ease');
                },
                function() {
                    $(this).css('transform', 'scale(1)');
                }
            );
        });
    </script>
</body>
</html>