如何使用 HTML、CSS 和 JavaScript 在图库视图中单击预览图像？

当开发图库视图时，一般需要增加预览功能以便用户可以在不离开当前页面的情况下查看图像。在本文中，我们将展示如何使用 HTML、CSS 和 JavaScript 来实现这个功能。

HTML 结构

首先，我们需要建立一个基本的 HTML 结构。

<div class="gallery">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
</div>

<div class="preview">
  <img src="">
</div>

这个结构中包含了两个 div，其中一个显示了预览图像，另一个则显示了实际的图库。

CSS 样式

接下来，我们需要设置一下 CSS 样式，以便能够使图库和预览部分合理的显示在页面上。

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery img {
  width: 200px;
  height: 200px;
  margin: 10px;
  object-fit: cover;
  cursor: pointer;
}

.preview img {
  max-width: 100%;
  height: auto;
}

这个样式表将图像大小设置为 200px × 200px，并将它们放在一个 flex 容器内，这样可以方便地对其进行布局。同时，我们还使用了 cursor 的属性，以便在用户悬浮在图片上时给予一定的视觉反馈。

JavaScript 交互

最后，我们需要编写一些 JavaScript 代码，以便响应单击事件，并在预览部分中显示图像。

const gallery = document.querySelector('.gallery');
const preview = document.querySelector('.preview img');

gallery.addEventListener('click', (event) => {
  if (event.target.tagName === 'IMG') {
    preview.src = event.target.src;
  }
});

这个代码片段使用了事件监听器 click 来检测用户单击事件。当用户单击时，我们检查被单击的元素是否是一个 img 元素，并将其 src 属性设置为预览部分图像的源。

总结

现在你知道了如何使用 HTML、CSS 和 JavaScript 来在图库视图中增加点击预览图像的功能。如果你需要进一步了解其中的细节，可以查看代码注释以便更好地理解代码的工作原理。