html+css+js 50个小项目之第一个卡片

最新推荐文章于 2024-07-25 09:24:40 发布

琪琪学前端study

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量122

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_46556769/article/details/127023727

版权

本项目需要掌握的技术要点：

1.flex布局

2.transition过度

3.js获取元素，动态添加和删除类名

1.html

外面一个cotainer大盒子，container盒子里面有一个panel盒子和一个h3标签

代码如下：

<body>
  <div class="container">
    <div class="panel active" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666522242&t=2336a2a0c5838db0f0852ff76dcae54b')">
      <h3>explore</h3>
    </div>
    <div class="panel " style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666522242&t=2336a2a0c5838db0f0852ff76dcae54b')">
      <h3>explore</h3>
    </div>
    <div class="panel " style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666522242&t=2336a2a0c5838db0f0852ff76dcae54b')">
      <h3>explore</h3>
    </div>
    <div class="panel " style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666522242&t=2336a2a0c5838db0f0852ff76dcae54b')">
      <h3>explore</h3>
    </div>
    <div class="panel " style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666522242&t=2336a2a0c5838db0f0852ff76dcae54b')">
      <h3>explore</h3>
    </div>
  </div>
</body>

2.css

* {
  /* 设置为标准盒模型 */
  box-sizing: border-box;
}
body {
  /* 给body设置为弹性布局 */
  display: flex;
  /* 子元素能够水平居中 */
  justify-content: center;
  /* 子元素能够垂直居中 */
  align-items: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.container {
  /* 给container设置为弹性布局 */
  display: flex;
  width: 90vw;
}
.panel {
  /* 等比例缩放 */
  background-size: cover;
  background-repeat: no-repeat;
  /* 背景图片位置居中 */
  background-position: center;
  height: 80vh;
  border-radius: 100px;
  cursor: pointer;
  margin: 10px;
  flex: 1;
  position: relative;
  /* 过度 */
  transition: all 1s ease-in;
}
.panel h3 {
  font-size: 26px;
  position: absolute;
  left: 20px;
  bottom: 0;
  opacity: 0;
}
.panel.active {
  flex:5
}
.panel.active h3 {
  opacity: 1;
  transition:opacity 1s ease-in;
}

3.js

// 1.获取元素
const panels = document.querySelectorAll('.panel')
// 遍历数组，为每个元素添加点击事件
panels.forEach(item => {
  item.addEventListener('click',function() {
    // 先删除active类
    removeClass()
    // 再添加active类
    item.classList.add('active')
});
  })
  
function removeClass() {
  panels.forEach(panel=>{
    panel.classList.remove('active')
  })
}

4.展示

已展示