c语言编程笔录

首页 >   > 笔记大全

笔记大全

jquery+图片查看大图

更新时间：2023-12-31

前言

本回答将使用 jQuery 来实现图片查看大图功能。jQuery 是一款功能强大、易于使用的 JavaScript 库，可以简化 JavaScript 编程和操作 HTML 文档的过程。

代码实现

// HTML 代码
<div class="thumbnail">
    <img src="small.jpg" alt="图片缩略图">
</div>
<div class="lightbox">
    <img src="large.jpg" alt="图片大图">
</div>

// CSS 代码
.thumbnail {
    cursor: pointer;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.lightbox img {
    max-height: 80%;
    max-width: 80%;
}

// JavaScript 代码
$(document).ready(function() {
    $('.thumbnail').click(function() {
        $('.lightbox').fadeIn();
    });
    
    $('.lightbox').click(function() {
        $('.lightbox').fadeOut();
    });
});

代码解释

以上代码实现了点击缩略图时显示大图，并点击大图时隐藏大图的功能。代码分为 HTML、CSS 和 JavaScript 三部分。

在 HTML 部分，使用了两个 `

` 元素，一个用于显示缩略图，一个用于显示大图。分别设置了对应的图片地址和 alt 属性。

在 CSS 部分，`.thumbnail` 类设置了鼠标指针为手型，为缩略图元素添加了点击事件处理函数。`.lightbox` 类设置了大图元素的样式，包括显示位置、背景颜色、文本居中、内边距以及大图的最大宽高。

在 JavaScript 部分，使用了 jQuery 的 `$` 函数来选取 HTML 元素。在文档加载完成后，为缩略图元素添加了点击事件，点击时显示大图元素。同时也为大图元素添加了点击事件，点击时隐藏大图元素。

总结

通过上述代码，我们实现了使用 jQuery 来查看图片大图的功能。当用户点击缩略图时，会弹出包含大图的遮罩层，用户可以按需查看大图，并可以通过点击遮罩层来关闭大图。这样用户可以在不离开当前页面的情况下查看大图，提供了更好的用户体验。

图文推荐