50天50个页面-DAY1-Expanding Card

小丹炉

已于 2023-02-11 17:15:07 修改

阅读量191

点赞数

分类专栏：前端文章标签：前端 html css javascript

于 2022-10-22 22:15:37 首次发布

本文链接：https://blog.csdn.net/Wang_guanyun/article/details/127468422

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示：

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>expanding-card</title>
  </head>
  <body>
    <div class="container">
      <div
        class="panel active"
        style="
          background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
        "
      >
        <h3>Explore The World</h3>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
        "
      >
        <h3>Wild Forest</h3>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');
        "
      >
        <h3>Sunny Beach</h3>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80');
        "
      >
        <h3>City on Winter</h3>
      </div>
      <div
        class="panel"
        style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
        "
      >
        <h3>Mountains - Clouds</h3>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS

* {
  /* 盒子计算方式为：总宽度=内容宽度+padding+border */
  box-sizing: border-box;
}

/* 整个页面 */
body {
  font-family: "Muli", sans-serif; /* 字体 */
  display: flex; /* 页面浮动布局 */
  flex-direction: row; /* 设置主轴为row(默认) */
  justify-content: center; /* 设置主轴上子元素居中排列 */
  align-items: center; /* 设置侧轴上子元素居中排列 */
  height: 100vh; /* 100%要求父级全为100%才生效，100vh针对当前盒子 */
  overflow: hidden; /* 溢出隐藏 */
  margin: 0; /* chrome中body的margin默认为8 */
}

/* 大容器盒子 */
.container {
  display: flex; /* 页面浮动布局 */
  width: 90vw; /* 宽度自适应布局 */
}

.panel {
  background-size: cover; /* 背景图片全覆盖，可能显示不全 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  height: 80vh; /* 高度自适应布局，为上层容器的80% */
  border-radius: 50px; /* 圆角 */
  color: #fff; /* 文字颜色 */
  cursor: pointer; /* 鼠标指针的样式 */
  flex: 0.5; /* 这是以下三个属性的简写 */
  /* flex-grow: 0.5 设置盒子增大的占比 */
  /* flex-shrink: 0.5 子盒子超过父盒子宽度后，超出部分缩小的比例 */
  /* flex-basis: 0% 设置盒子基准宽度，而且basis会取代width */
  margin: 10px; /* 设置盒子外边框 */
  position: relative; /* 相对位置定位，子绝父相 */
  transition: all 300ms ease-in; /* 元素过渡 none|all|属性 持续时间 时间函数 延迟时间 */
}

.panel h3 {
  font-size: 24px; /* 字体大小 */
  position: absolute; /* 绝对定位 */
  bottom: 20px; /* 距底部20px */
  left: 20px; /* 距左侧20px */
  margin: 0; /* 清除外边距 */
  opacity: 0; /* 完全透明 */
}

.panel.active {
  flex: 5; /* 增宽权重 */
  /* flex布局中，父元素内部的子元素根据权重分配剩余空间，共5个元素，则该元素分配的空间占比为5/(0.5*4+5) */
}

.panel.active h3 {
  opacity: 1; /* 元素的透明度为1 */
  transition: opacity 0.3s ease-in 0.4s; /* 过渡显示透明度 */
}

/* 设备屏幕宽度<=680px时应用css样式 */
@media (max-width: 680px) {
  .container {
    width: 100vw;
  }
  /* 宽度满足时不显示第四、第五个元素 */
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

JavaScript

// 将所有panel类的元素节点封装成数组返回
const panels = document.querySelectorAll(".panel");

// 鼠标点击后，清除所有active类后重新赋给点击的元素
// forEach()方法对数组的每个元素执行一次提供的函数。
panels.forEach((panel) => {
  /* 箭头函数，通过监听器点击执行 */
  panel.addEventListener("click", () => {
    removeActiveClasses(); // 删除所有active类
    panel.classList.add("active"); // 对当前点击的元素赋active类
  });
});

// 删除所有active类
function removeActiveClasses() {
  // 遍历panels数组中的每一个panel，删除active类
  panels.forEach((panel) => {
    panel.classList.remove("active");
  });
}