当前位置：首页 > JavaScript

js实现相册放大

2026-04-07 11:49:48JavaScript

以下是通过 JavaScript 实现图片相册放大功能的实现方法：

方法一：使用 CSS 和 JavaScript 结合实现模态框放大

创建 HTML 结构：

<div class="gallery">
  <img src="image1.jpg" onclick="openModal(this)">
  <img src="image2.jpg" onclick="openModal(this)">
</div>

<div id="modal" class="modal">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modal-img">
</div>

添加 CSS 样式：

.gallery img {
  width: 200px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript 功能实现：

function openModal(img) {
  const modal = document.getElementById("modal");
  const modalImg = document.getElementById("modal-img");
  modal.style.display = "block";
  modalImg.src = img.src;
}

function closeModal() {
  document.getElementById("modal").style.display = "none";
}

方法二：使用 CSS transform 实现平滑缩放效果

修改 CSS 部分：

.gallery img {
  width: 200px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
}

.modal-content {
  animation: zoom 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1)}
  to {transform: scale(1)}
}

方法三：使用第三方库（如 Lightbox）

安装 Lightbox 库：

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

使用方式：

js实现相册放大

<a href="image1.jpg" data-lightbox="gallery">
  <img src="image1-thumb.jpg">
</a>
<a href="image2.jpg" data-lightbox="gallery">
  <img src="image2-thumb.jpg">
</a>