html图片手风琴

HTML图片手风琴是一种常见的图片展示方式，可以通过CSS实现。下面是一个简单的示例代码：

HTML部分：

<div class="accordion">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS部分：

.accordion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.accordion img {
  width: 30%;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.accordion img:hover {
  width: 50%;
}

这段代码会将三张图片在水平方向上排列，并且在鼠标悬停时，图片宽度会变大，从而形成手风琴的效果。你可以根据实际需求修改样式和动画效果。

相关问题

用js实现图片手风琴效果

你好！感谢你的提问，我会尽力回答。以下是用JS实现图片手风琴效果的步骤：

1. 首先在HTML中创建一个包含多张图片的容器，可以使用ul和li标签来实现。

2. 给每张图片绑定一个点击事件，当点击某张图片时，将该图片放大并使其居中展示，同时缩小其他图片。

3. 可以通过CSS样式或JS动态修改图片的大小和位置，实现手风琴效果。

下面是一个简单的示例代码：

HTML代码：

<ul class="accordion">
  <li>
    <img src="img1.jpg">
  </li>
  <li>
    <img src="img2.jpg">
  </li>
  <li>
    <img src="img3.jpg">
  </li>
</ul>

CSS样式：

.accordion li {
  float: left;
  width: 20%;
  height: 100px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}

.accordion li img {
  transition: all 0.5s ease-in-out;
}

.accordion li.active img {
  transform: scale(1.2);
  margin-top: -10px;
}

JS代码：

const lis = document.querySelectorAll('.accordion li');

for (let i = 0; i < lis.length; i++) {
  const li = lis[i];

  li.addEventListener('click', function() {
    for (let j = 0; j < lis.length; j++) {
      const otherLi = lis[j];
      if (otherLi !== li) {
        otherLi.classList.remove('active');
        otherLi.querySelector('img').style.transform = '';
        otherLi.querySelector('img').style.marginTop = '';
      }
    }
    li.classList.add('active');
    li.querySelector('img').style.transform = 'scale(1.2)';
    li.querySelector('img').style.marginTop = '-10px';
  });
}

希望这能帮助到你！如果还有其他问题，请随时问我。