做者:battleKing
仓库:Github、CodePen
博客:CSDN、掘金
反馈邮箱:myh19970701@foxmail.com
特别声明:原创不易,未经受权不得转载或抄袭,如需转载可联系笔者受权css
手风琴式折叠卡片展现效果,通常用于 展现图片、照片、文字
等等。其 主要特色
是:当咱们点击任意一张照片时,那张照片像手风琴同样缓缓展开,其余照片像手风琴同样缓缓折叠起来,后续咱们还能够向其添加不少各类各样丰富的效果,好比自动轮播、增长3D立体感 ......html
div
命名类名为 box
box
里面添加五个类名为 panel
的 div
panel
的 div
中添加 active
类名panel
的 div
中添加一个 <h3> </h3>
<div class="box">
<div class="panel active"">
<h3>Explore The World</h3>
</div>
<div class=" panel">
<h3>Wild Forest</h3>
</div>
<div class="panel">
<h3>Sunny Beach</h3>
</div>
<div class="panel">
<h3>City on Winter</h3>
</div>
<div class="panel">
<h3>Mountains - Clouds</h3>
</div>
</div>
复制代码
先初始化页面git
*
为 box-sizing: border-box
body
来使整个项目居中body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
复制代码
介绍一个随机图库github
做用:生产随机假图,用于测试web
Lorem Picsum 图库官网 、 所有图片IDmarkdown
https://picsum.photos/200/300
https://picsum.photos/1350/900?random=1
https://picsum.photos/id/237/200/300
主要样式的代码dom
.box {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
flex: 0.5;
margin: 10px;
position: relative;
-webkit-transition: all 700ms ease-in;
transition: all 700ms ease-in;
}
.panel:nth-child(1){
background-image: url("https://picsum.photos/1350/900?random=1");
}
.panel:nth-child(2){
background-image: url("https://picsum.photos/1350/900?random=2");
}
.panel:nth-child(3){
background-image: url("https://picsum.photos/1350/900?random=3");
}
.panel:nth-child(4){
background-image: url("https://picsum.photos/1350/900?random=4");
}
.panel:nth-child(5){
background-image: url("https://picsum.photos/1350/900?random=5");
}
.panel h3 {
font-size: 24px;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
opacity: 0;
}
.panel.active {
flex: 5;
}
.panel.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
复制代码
主要逻辑oop
document.querySelectorAll('.panel')
forEach
进行遍历,为每个类名为 pancel
的元素都添加上一个 click事件
forEach
进行遍历,移除所有 pancel
的元素的 active
类名,而后再为 被点击的那个 pancel
元素添上一个 active
类名。const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
panel.addEventListener('click', () => {
removeActiveClasses()
panel.classList.add('active')
})
})
function removeActiveClasses() {
panels.forEach(panel => {
panel.classList.remove('active')
})
}
复制代码
若是本文对你有帮助,就点个赞支持下吧,你的「赞」是我创做的动力。测试
若是你喜欢这篇文章的话,能够「点赞」 + 「收藏」 + 「转发」 给更多朋友。flex