当前位置:主页 > JavsScript库 > 图库 / 图片 >

JavaScript中的手风琴式响应式照片库
栏目分类:图库 / 图片   发布日期:2021-09-13   浏览次数:

一个响应式照片库,用户可以在其中像手风琴滑块一样展开和折叠图像。

使用:

1. 添加图像作为面板的背景。

<div class="container">
  <div class="panel active" style="background-image:url(img/1.jpg);">
    <h3>html369.cn</h3>
  </div>
  <div class="panel" style="background-image:url(img/2.jpg);">
    <h3>html369.cn</h3>
  </div>
  <div class="panel" style="background-image:url(img/3.jpg);">
    <h3>html369.cn</h3>
  </div>
  <div class="panel" style="background-image:url(img/4.jpg);">
    <h3>html369.cn</h3>
  </div>
  <div class="panel" style="background-image:url(img/5.jpg);">
    <h3>html369.cn</h3>
  </div>
  <div class="panel" style="background-image:url(img/6.jpg);">
    <h3>html369.cn</h3>
  </div>
</div>

2.必要的CSS样式。

.container
{
  display: flex;
  width: 90vw;
}
 
.panel
{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 85vh;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  flex: .5;
  margin: 10px;
  transition: all 700ms ease-in;
}
 
.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 .3s ease-in .4s;
}
 
@media(max-width:480px)
{
  .container
  {
      width: 100vw;
  }
 
  .panel:nth-last-of-type(6),
  .panel:nth-last-of-type(7)
  {
      display: none;
  }
}

3. 通过切换 CSS 类启用手风琴式平滑过渡。

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

官方网站:https://github.com/gunesenes/responsive-image-gallery-design

相关热词: 手风琴滑块照片库

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库