使用 HTML 和 CSS 创建图像手风琴

介绍

图像手风琴可以使网站更具交互性，增加了用户体验和视觉效果。通过 HTML 和 CSS 的组合，可以很容易地创建手风琴。

本文将介绍如何使用 HTML 和 CSS 创建图像手风琴。

步骤

1. 创建 HTML 结构

在 HTML 中，我们需要定义一个容器 div 来放置所有的图像和标题。每个图像都用 img 标签引入，并将其放置在一个新的 div 中，以便我们可以更容易地控制其大小和位置。

<div class="accordion">
  <div class="item">
    <img src="image1.jpg">
    <h2>Title 1</h2>
  </div>
  <div class="item">
    <img src="image2.jpg">
    <h2>Title 2</h2>
  </div>
  <div class="item">
    <img src="image3.jpg">
    <h2>Title 3</h2>
  </div>
</div>

2. 创建 CSS 样式

使用 CSS，我们可以调整样式和布局。首先，我们将 accordion 容器设置为相对定位，并将其子元素 item 设置为绝对定位，以便我们可以将它们从容器中移开。我们还将 item 大小设置为容器大小的一半，并使用 transform 属性将其旋转 90 度以创建手风琴效果。

.accordion {
  position: relative;
  height: 400px;
}

.item {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: rotate(0deg);
  transform-origin: left center;
}

.item:nth-child(1) {
  left: 0;
  background-color: #f2f2f2;
}

.item:nth-child(2) {
  left: 50%;
  background-color: #ccc;
}

.item:nth-child(3) {
  left: 100%;
  background-color: #f2f2f2;
}

.item.open {
  width: 100%;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right center;
}

我们还添加了过渡效果，以便手风琴能够平滑地展开和折叠。

最后的样式是 item.open，这是指当手风琴打开时应用的样式。我们将其宽度设置为 100%，旋转 90 度并将其移动到容器的右侧。

3. 添加 JavaScript

我们使用 JavaScript 来监听鼠标单击事件，并在单击时添加或删除 open 类，以打开或关闭手风琴。

const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('click', () => {
    items.forEach(item => item.classList.remove('open'));
    item.classList.add('open');
  });
});

综合代码示例

<div class="accordion">
  <div class="item">
    <img src="image1.jpg">
    <h2>Title 1</h2>
  </div>
  <div class="item">
    <img src="image2.jpg">
    <h2>Title 2</h2>
  </div>
  <div class="item">
    <img src="image3.jpg">
    <h2>Title 3</h2>
  </div>
</div>

.accordion {
  position: relative;
  height: 400px;
}

.item {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s ease;
  transform: rotate(0deg);
  transform-origin: left center;
}

.item:nth-child(1) {
  left: 0;
  background-color: #f2f2f2;
}

.item:nth-child(2) {
  left: 50%;
  background-color: #ccc;
}

.item:nth-child(3) {
  left: 100%;
  background-color: #f2f2f2;
}

.item.open {
  width: 100%;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right center;
}

const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.addEventListener('click', () => {
    items.forEach(item => item.classList.remove('open'));
    item.classList.add('open');
  });
});

结论

使用上述步骤，我们可以很容易地创建一个图像手风琴。我们使用 HTML 定义图像和标题，使用 CSS 设置样式和布局，并使用 JavaScript 添付交互性。

图像手风琴可以为网站增添特色和视觉效果，从而提高用户体验和网站流量。