用jquery将九张图片景点作为九宫格

原创

mob649e8167c4a3 2024-11-28 06:05:09 ©著作权

文章标签 jQuery HTML 九宫格 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8167c4a3的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 实现九宫格图片展示

在网页开发中，使用 jQuery 实现九宫格展示图片是一个非常实用的技能。接下来，我将手把手教你如何实现这一功能。整件事情的流程如下表所示：

步骤	描述
1	创建 HTML 结构
2	添加 CSS 样式
3	引入 jQuery
4	编写 jQuery 代码
5	测试和优化

第一步：创建 HTML 结构

首先，我们需要为九张图片创建一个简单的 HTML 结构。以下是代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>九宫格图片展示</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item"><img src="image1.jpg" alt="景点1"></div>
        <div class="grid-item"><img src="image2.jpg" alt="景点2"></div>
        <div class="grid-item"><img src="image3.jpg" alt="景点3"></div>
        <div class="grid-item"><img src="image4.jpg" alt="景点4"></div>
        <div class="grid-item"><img src="image5.jpg" alt="景点5"></div>
        <div class="grid-item"><img src="image6.jpg" alt="景点6"></div>
        <div class="grid-item"><img src="image7.jpg" alt="景点7"></div>
        <div class="grid-item"><img src="image8.jpg" alt="景点8"></div>
        <div class="grid-item"><img src="image9.jpg" alt="景点9"></div>
    </div>
    <script src="
    <script src="script.js"></script>
</body>
</html>

解释：

grid-container 是包含九张图片的容器。
每个 grid-item 代表九宫格的一个单元。

第二步：添加 CSS 样式

接下来，我们需要为九宫格添加样式，使其呈现为一个整齐的布局。以下是代码示例：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* 每个单元之间的间隔 */
}

.grid-item img {
    width: 100%; /* 图片宽度自适应 */
    height: auto; /* 图片高度保持比例 */
    border-radius: 5px; /* 图片四角圆滑 */
}

解释：

display: grid; 使用 CSS 网格布局来创建九宫格。
grid-template-columns: repeat(3, 1fr); 每行显示三个单元。

第三步：引入 jQuery

在你 HTML 的 <head> 标签中，我们已经引入了 jQuery 的 CDN。这样你就可以在后面的步骤中使用 jQuery 功能。

第四步：编写 jQuery 代码

以下是一个简单的示例，通过 jQuery 为每个图片添加点击事件：

$(document).ready(function() {
    $('.grid-item img').on('click', function() {
        var src = $(this).attr('src'); // 获取点击图片的源地址
        alert('你点击了：' + src); // 弹出提示
    });
});

解释：

$(document).ready(...) 用来确保 DOM 加载完成后再执行代码。
$('.grid-item img').on('click', function() {...}) 为每个图片添加点击事件，点击后弹出该图片的源地址。

第五步：测试和优化

完成上述步骤后，你可以在浏览器中测试这个功能。如果需要，针对样式和功能进行相应的优化。

关系图和序列图

接下来，使用 Mermaid 语法为整个过程创建关系图和序列图。

关系图

erDiagram
    图片 {
        string src
        string alt
    }
    九宫格 {
        图片[] images
    }

序列图

sequenceDiagram
    participant 用户
    participant 网页
    participant jQuery

    用户->>网页: 打开页面
    网页->>用户: 显示九宫格图片
    用户->>网页: 点击图片
    网页->>jQuery: 触发点击事件
    jQuery-->>网页: 显示图片链接