扩展卡(Expanding Cards)

粽子师兄

已于 2022-02-09 14:36:40 修改

阅读量447

点赞数 1

分类专栏： demo 文章标签： css3 html javascript filter flex

于 2022-01-28 11:19:56 首次发布

本文链接：https://blog.csdn.net/qq_45268602/article/details/122728614

版权

demo 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述
来源github，参考链接50 Projects In 50 Days - HTML, CSS & JavaScript

重点：
1、使用flex布局
2、使用[].filter.call方法

实现代码：
index.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">
  <title>Expanding Cards</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
  <div class="container">
    <div class="panel active" style="background-image: url('https://images5.alphacoders.com/706/thumb-1920-706467.jpg');"><h3>Lionel Messi 1</h3></div>
    <div class="panel" style="background-image: url('https://images3.alphacoders.com/260/thumb-1920-260247.jpg');"><h3>Lionel Messi 2</h3></div>
    <div class="panel" style="background-image: url('https://images8.alphacoders.com/571/thumb-1920-571558.jpg');"><h3>Lionel Messi 3</h3></div>
    <div class="panel" style="background-image: url('https://images4.alphacoders.com/244/thumb-1920-244338.jpg');"><h3>Lionel Messi 4</h3></div>
    <div class="panel" style="background-image: url('https://images3.alphacoders.com/183/thumb-1920-183967.jpg');"><h3>Lionel Messi 5</h3></div>
    <div class="panel" style="background-image: url('https://images5.alphacoders.com/521/thumb-1920-521476.jpg');"><h3>Lionel Messi 6</h3></div>
</div>
</body>
<script src="../js/index.js"></script>
</html>

index.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,html{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  display: flex;
  width: 90vw;
}
.container > .panel{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  flex: 0.5;
  padding: 10px;
  color: #fff;
  border-radius: 50px;
  margin: 10px;
  transition:  flex .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  cursor: pointer;
  height: 90vh;
}
.container > .panel > h3{
  color: aquamarine;
  font-size: 25px;
  text-align: center;
  line-height: 90vh;
}
.container > .panel.active{
  flex: 5;
}

index.js

const panelItems = document.querySelectorAll(".container > .panel");
panelItems.forEach((item) => {
  item.addEventListener("click", () => {
    [].filter.call(item.parentElement.children, el => el !== item).forEach(el => el.classList.remove("active"));
    item.classList.add("active");
  })
})