江月迟迟的个人知识库

外观

【功能实现】折叠手风琴 ​

作者:江月迟迟
发表于:2024-12-10
字数统计:954 字
预计阅读4分钟

介绍 ​

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

准备 ​

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

txt
├── 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 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 2731 | 总提交次数: 2833 | 通过率: 96.4%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, jQuery

题解 ​

js
function init() {
    const options = document.querySelectorAll('.options .option')
    options.forEach(item => {
        item.addEventListener('click', () => {
            document.querySelector('.options .active').classList.remove('active')
            item.classList.add('active')
        })
    })
}

init()

另提，我觉得这个项目挺有意思的，copy以下代码玩玩

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);
}
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>