jquery点击小图弹出大图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地实现复杂的 JavaScript 功能。

类型

jQuery 主要用于前端开发，涉及以下方面：

DOM 操作
事件处理
动画效果
Ajax 交互

应用场景

网页交互设计
表单验证
图片轮播
弹出窗口

示例代码

以下是一个使用 jQuery 实现点击小图弹出大图的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Click Image to Enlarge</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #enlarge {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-width: 90%;
            max-height: 90%;
            z-index: 1000;
        }
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
        }
    </style>
</head>
<body>
    <img src="small-image.jpg" alt="Small Image" id="small-image">
    <div id="overlay"></div>
    <img src="large-image.jpg" alt="Large Image" id="enlarge">

    <script>
        $(document).ready(function() {
            $('#small-image').click(function() {
                $('#enlarge').show();
                $('#overlay').show();
            });

            $('#overlay').click(function() {
                $('#enlarge').hide();
                $('#overlay').hide();
            });
        });
    </script>
</body>
</html>