造轮子之图片组件(preview)

2023-11-03 17:59:17

引言

图片缩放和预览是一种常见的需求，用于在网站上查看和分享图片。图片缩放和预览组件允许用户点击图片以打开一个模态窗口，其中包含图片的更大版本。组件还支持键盘导航和手势控制，使图片的查看和分享更加方便。

实现

图片缩放和预览组件可以使用 HTML、CSS 和 JavaScript 来实现。首先，我们需要创建一个 HTML 结构来包含图片和模态窗口。

<div class="image-preview">
  <img src="image.jpg" alt="Image">
  <div class="modal">
    <img src="image.jpg" alt="Image">
    <span class="close">×</span>
  </div>
</div>

接下来，我们需要使用 CSS 来设置图片和模态窗口的样式。

.image-preview {
  position: relative;
}

.image-preview img {
  cursor: pointer;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.modal img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

最后，我们需要使用 JavaScript 来实现图片的缩放和预览功能。

document.querySelectorAll('.image-preview img').forEach(function(img) {
  img.addEventListener('click', function() {
    var modal = img.parentNode.querySelector('.modal');
    modal.style.opacity = 1;
    modal.style.visibility = 'visible';
  });
});

document.querySelectorAll('.modal .close').forEach(function(close) {
  close.addEventListener('click', function() {
    var modal = close.parentNode;
    modal.style.opacity = 0;
    modal.style.visibility = 'hidden';
  });
});