js图片手风琴效果代码

图片手风琴效果是一种常见的网页交互设计，它允许用户通过点击或滑动来展开或折叠图片，从而展示更多的内容。以下是一个简单的JavaScript实现示例，结合HTML和CSS来完成这个效果。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片手风琴效果</title>
<style>
  /* 基础样式 */
  .accordion {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  .accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .accordion-header {
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
  }
  .accordion-content {
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .accordion-content img {
    width: 100%;
    display: block;
  }
</style>
</head>
<body>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">图片1</div>
    <div class="accordion-content">
      <img src="image1.jpg" alt="Image 1">
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">图片2</div>
    <div class="accordion-content">
      <img src="image2.jpg" alt="Image 2">
    </div>
  </div>
  <!-- 更多图片项... -->
</div>

<script>
  // JavaScript代码
  document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', function() {
      const content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + 'px';
      }
    });
  });
</script>

</body>
</html>

代码解释

HTML部分:
- 创建了一个包含多个.accordion-item的.accordion容器。
- 每个.accordion-item包含一个标题（.accordion-header）和一个内容区域（.accordion-content）。

CSS部分:
- 设置了基本的样式，包括边框、背景色等。
- .accordion-content设置了初始的max-height为0，并且通过transition属性添加了展开和折叠的动画效果。
JavaScript部分:
- 使用querySelectorAll选择所有的.accordion-header元素。
- 为每个标题添加点击事件监听器。
- 在点击事件中，切换相邻内容区域的max-height属性，从而实现展开和折叠的效果。