js实现点击图片放大

实现点击图片放大功能

在JavaScript中实现点击图片放大功能，可以通过以下几种方法完成。

使用CSS和JavaScript结合

创建一个遮罩层和放大的图片容器，通过JavaScript控制显示和隐藏。

<style>
  .image-container {
    cursor: pointer;
  }
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    text-align: center;
  }
  .modal-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
  }
</style>

<div class="image-container">
  <img src="small-image.jpg" alt="Click to enlarge" id="smallImage">
</div>

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="enlargedImage">
</div>

<script>
  const smallImage = document.getElementById('smallImage');
  const modal = document.getElementById('myModal');
  const enlargedImage = document.getElementById('enlargedImage');
  const closeBtn = document.querySelector('.close');

  smallImage.onclick = function() {
    modal.style.display = 'block';
    enlargedImage.src = this.src;
  }

  closeBtn.onclick = function() {
    modal.style.display = 'none';
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = 'none';
    }
  }
</script>

使用第三方库

使用诸如Lightbox、Fancybox等现成的库可以快速实现图片放大功能。

安装Fancybox:

npm install @fancyapps/ui

使用示例:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

<a data-fancybox="gallery" href="large-image.jpg">
  <img src="small-image.jpg" alt="" />
</a>

纯CSS实现

对于简单的需求，可以使用CSS的transform属性实现放大效果。

<style>
  .zoomable-image {
    transition: transform 0.25s ease;
    cursor: zoom-in;
  }
  .zoomable-image:active {
    transform: scale(2);
    cursor: zoom-out;
  }
</style>

<img src="image.jpg" class="zoomable-image">

响应式图片放大

针对不同设备尺寸，实现响应式的图片放大效果。

function setupImageZoom() {
  const images = document.querySelectorAll('.zoomable');

  images.forEach(img => {
    img.addEventListener('click', function() {
      if (window.innerWidth > 768) {
        this.classList.toggle('zoomed');
      } else {
        window.open(this.src, '_blank');
      }
    });
  });
}

window.addEventListener('DOMContentLoaded', setupImageZoom);

.zoomable {
  cursor: pointer;
  transition: transform 0.3s;
}
.zoomable.zoomed {
  transform: scale(2);
  z-index: 100;
  position: relative;
}

以上方法可以根据具体需求选择使用，从简单的CSS变换到复杂的模态框实现，都能有效完成图片放大功能。