jquery 缩略图放大

基础概念

jQuery 缩略图放大是一种常见的网页交互效果，通常用于图片展示页面。用户可以通过点击缩略图来查看图片的放大版本，从而获得更清晰的视觉体验。这种效果可以通过 jQuery 结合 CSS 和 JavaScript 来实现。

类型

弹出层放大：点击缩略图后，在页面上弹出一个覆盖层，显示放大后的图片。
全屏放大：点击缩略图后，图片全屏显示，提供更大的查看空间。
画廊模式：多个缩略图组成一个画廊，点击某个缩略图后，其他缩略图自动缩放或隐藏。

应用场景

产品展示：在电商网站上展示商品图片，用户可以点击查看细节。
图片库：在图片分享网站或社交媒体上，用户可以查看高清图片。
新闻报道：在新闻网站上，用户可以查看新闻图片的详细内容。

示例代码

以下是一个简单的 jQuery 缩略图放大示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 缩略图放大</title>
    <style>
        .thumbnail {
            cursor: pointer;
            margin: 10px;
        }
        #enlarged-image {
            display: none;
            max-width: 80%;
            max-height: 80%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <img src="thumbnail1.jpg" class="thumbnail" alt="Thumbnail 1">
    <img src="thumbnail2.jpg" class="thumbnail" alt="Thumbnail 2">
    <img src="thumbnail3.jpg" class="thumbnail" alt="Thumbnail 3">

    <img id="enlarged-image" src="" alt="Enlarged Image">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.thumbnail').click(function() {
                var enlargedImageSrc = $(this).attr('src');
                $('#enlarged-image').attr('src', enlargedImageSrc).fadeIn();
            });

            $('#enlarged-image').click(function() {
                $(this).fadeOut();
            });
        });
    </script>
</body>
</html>