【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

Rossy Yan

发布于 2025-01-24 11:14:46

1.2K0

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

介绍

本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── css
│   └── style.css
├── images
│   ├── pic1.jpeg
│   ├── pic2.jpeg
│   ├── pic3.jpeg
│   ├── pic4.jpeg
│   └── pic5.jpeg
├── js
│   ├── index.js
│   └── jquery-3.6.0.min.js
└── index.html

其中：

css/style.css 是页面样式文件。
images 是项目所用到的图片文件夹。
js 是放置 js 代码的文件夹。
index.html 是页面布局。

选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的【Web 服务】，就可以在浏览器中看到当前页面，点击图片，被折叠的图片不会展开。

目标

请完善 index.js 文件，让页面具有如下所示的效果：

规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

通关代码✔️

//index.js
$(function() {
    $(".option").click(function() {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    });
});

代码解析📑

1. HTML 部分

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="options">
        <div class="option active" style="--optionBackground:url(../images/pic1.jpeg);" id="item1">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic2.jpeg);" id="item2">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic3.jpeg);" id="item3">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic4.jpeg);" id="item4">
            <div class="shadow"></div>
        </div>
        <div class="option" style="--optionBackground:url(../images/pic5.jpeg);" id="item5">
            <div class="shadow"></div>
        </div>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>

解释：

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：表示 HTML 文档的语言为英语。
<head> 部分：
- <meta charset="UTF-8">：指定文档的字符编码为 UTF-8，确保支持多种字符集。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口信息，让页面根据设备宽度进行缩放，初始缩放比例为 1.0，提高移动设备的浏览体验。
- <title>Document</title>：设置页面的标题。
- <link rel="stylesheet" href="./css/style.css">：引入外部的 CSS 样式文件，将 style.css 文件应用到页面，为页面添加样式。
<body> 部分：
- <div class="options">：一个容器元素，用于包含多个 .option 元素。
- <div class="option">：代表手风琴的一个选项，每个选项都包含一张图片。
  - style="--optionBackground:url(../images/pic1.jpeg);"：使用自定义 CSS 变量 --optionBackground 为元素设置背景图片。
  - <div class="shadow"></div>：可能用于添加阴影效果的子元素。
- <script src="./js/jquery-3.6.0.min.js"></script>：引入 jQuery 库，为使用 jQuery 语法提供支持。
- <script src="./js/index.js"></script>：引入自定义的 JavaScript 文件，包含实现手风琴功能的逻辑。

2. CSS部分

/*style.css*/
body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 100vh;
  transition: 0.25s;
}
body .options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-width: 600px;
  max-width: 900px;
  width: calc(100% - 100px);
  height: 400px;
}
@media screen and (max-width: 718px) {
  body .options {
    min-width: 520px;
  }
  body .options .option:nth-child(5) {
    display: none;
  }
}
@media screen and (max-width: 638px) {
  body .options {
    min-width: 440px;
  }
  body .options .option:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 558px) {
  body .options {
    min-width: 360px;
  }
  body .options .option:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 478px) {
  body .options {
    min-width: 280px;
  }
  body .options .option:nth-child(2) {
    display: none;
  }
}
body .options .option {
  position: relative;
  overflow: hidden;
  min-width: 60px;
  margin: 10px;
  background: var(--optionBackground);
  background-size: auto 120%;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option.active {
  flex-grow: 10000;
  transform: scale(1);
  max-width: 600px;
  margin: 0px;
  border-radius: 40px;
  background-size: auto 100%;
}
body .options .option.active .shadow {
  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option:not(.active) {
  flex-grow: 1;
  border-radius: 30px;
}
body .options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}

解释：

body 部分：
- display: flex; flex-direction: row; justify-content: center; align-items: center;：将 body 元素设置为水平方向的弹性布局，使内容在水平和垂直方向上居中。
- overflow: hidden;：隐藏溢出部分，防止内容超出视口。
- height: 100vh;：将 body 的高度设置为视口高度的 100%。
- transition: 0.25s;：添加过渡效果，让元素的属性变化更平滑。
body.options 部分：
- display: flex; flex-direction: row; align-items: stretch;：将 .options 容器设置为水平方向的弹性布局，并让子元素拉伸以填充容器的高度。
- overflow: hidden;：隐藏子元素的溢出部分。
- min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px;：设置 .options 容器的宽度和高度，并设置最小和最大宽度。
@media 部分：
- 这是媒体查询，用于响应式设计，根据不同的屏幕宽度调整 .options 容器的最小宽度，并隐藏相应的 .option 元素。
body.options.option 部分：
- position: relative; overflow: hidden; min-width: 60px; margin: 10px;：设置 .option 元素的基本样式，如相对定位、最小宽度和外边距。
- background: var(--optionBackground);：使用自定义 CSS 变量设置背景图片。
- background-size: auto 120%; background-position: center;：设置背景图片的大小和位置。
- cursor: pointer;：将鼠标指针样式设置为手型，提示用户可以点击。
- transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);：添加过渡效果。
body.options.option.active 部分：
- flex-grow: 10000; transform: scale(1); max-width: 600px; margin: 0px; border-radius: 40px; background-size: auto 100%;：当 .option 元素具有 .active 类时，它会扩展以填充更多空间，进行缩放和改变外观。
body.options.option.active.shadow 部分：
- box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;：为激活的 .option 元素的 .shadow 子元素添加阴影效果。
body.options.option:not(.active) 部分：
- flex-grow: 1; border-radius: 30px;：未激活的 .option 元素会有不同的大小和外观。
body.options.option:not(.active).shadow 部分：
- bottom: -40px; box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;：未激活的 .option 元素的 .shadow 子元素有不同的位置和阴影效果。

3. JavaScript 部分

$(function() {
    $(".option").click(function() {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    });
});

解释：

(function() {...})：这是 jQuery 的文档就绪函数，等同于 (document).ready(function() {...})，确保在文档的 DOM 结构加载完成后才开始执行其中的代码。
(".option").click(function() {...})：使用 jQuery 的选择器
(this).addClass("active");：当用户点击一个 .option 元素时，
$(this).siblings().removeClass("active");：使用 siblings() 方法找到被点击元素的兄弟元素，使用 removeClass("active") 移除它们的 active 类，确保同一时间只有一个元素处于激活状态。

4. 工作流程 ▶️

初始状态：
- HTML 部分创建了多个选项元素，部分元素添加了 active 类。
- CSS 部分为元素设置了基本样式，包括布局、背景、阴影和过渡效果。具有 active 类的元素使用 flex-grow 占据更多空间，其他元素占据较少空间。
- 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。
用户交互：
- 当用户点击某个 .option 元素时，JavaScript 部分的点击事件处理函数会触发。
- 被点击的元素会添加 active 类，其兄弟元素的 active 类会被移除。
样式更新：
- 由于 CSS 中对 .option.active 和 .option:not(.active) 有不同的样式设置，添加 active 类的元素会展开，其宽度、圆角、阴影等样式会更新，通过过渡效果实现平滑的展开动画。
- 移除 active 类的元素会收缩，样式也会相应改变，实现收缩动画。
响应式调整：
- 不同的媒体查询会根据设备的屏幕宽度隐藏部分元素，确保在不同屏幕尺寸下页面的布局和显示效果。