js实现点击预览放大图片

在JavaScript中，实现点击预览放大图片可以通过以下步骤完成：

1. 创建一个小图片预览区域，并为每个小图片添加点击事件。
2. 当点击小图片时，显示一个大的背景遮罩层，并在其中放置被点击的图片。
3. 允许用户通过键盘方向键（如果需要）或者点击遮罩层上的关闭按钮来关闭预览。

以下是实现这一功能的示例代码：

HTML:

<div id="gallery">
  <img class="thumbnail" src="image1.jpg" alt="Image 1">
  <img class="thumbnail" src="image2.jpg" alt="Image 2">
  <!-- 更多图片 -->
</div>
 
<!-- 遮罩层和图片容器 -->
<div id="lightbox">
  <img id="enlarged-image" src="">
  <span id="close-button">&times;</span>
</div>

CSS:

#lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
 
#enlarged-image {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  z-index: 1001;
}
 
#close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  z-index: 1002;
}

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var thumbnails = document.querySelectorAll('.thumbnail');
  var lightbox = document.getElementById('lightbox');
  var enlargedImage = document.getElementById('enlarged-image');
  var closeButton = document.getElementById('close-button');
 
  thumbnails.forEach(function(thumbnail) {
    thumbnail.addEventListener('click', function() {
      enlargedImage.src = this.src;
      lightbox.style.display = 'flex';
    });
  });
 
  closeButton.addEventListener('click', function() {
    lightbox.style.display = 'none';
  });
 
  // 添加键盘方向键支持（可选）
  document.addEventListener('keyup', function(event) {
    if (lightbox.style.display === 'flex' && event.key === 'Escape') {
      lightbox.style.display = 'none';
    }
  });
});

这段代码实现了基本的图片预览功能。点击小图片后，被点击的图片会被放大显示，用户可以通过点击遮罩层上的关闭按钮或按下键盘上的Esc键来关闭预览。