js实现图片点击放大

实现图片点击放大的方法

使用CSS和JavaScript结合

通过CSS设置放大效果，JavaScript监听点击事件切换样式类。

<style>
  .image-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    cursor: pointer;
  }

  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .image-container.zoomed img {
    transform: scale(2);
  }
</style>

<div class="image-container" onclick="this.classList.toggle('zoomed')">
  <img src="your-image.jpg" alt="Click to zoom">
</div>

使用模态框实现放大

创建全屏模态框显示放大后的图片。

<style>
  .thumbnail {
    width: 200px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    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>

<img class="thumbnail" src="your-image.jpg" onclick="openModal(this)">

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

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

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

使用第三方库

利用成熟的第三方库如lightbox2、fancybox等简化实现。

安装lightbox2:

<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>

<a href="large-image.jpg" data-lightbox="image-1" data-title="My caption">
  <img src="small-image.jpg" alt="thumbnail">
</a>

纯CSS解决方案

仅使用CSS的:target伪类实现点击放大效果。

<style>
  .thumbnail {
    width: 200px;
    display: block;
  }

  #zoomed-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    text-align: center;
  }

  #zoomed-image:target {
    display: block;
  }

  #zoomed-image img {
    max-width: 90%;
    max-height: 90%;
    margin-top: 5%;
  }
</style>

<a href="#zoomed-image">
  <img src="small-image.jpg" class="thumbnail">
</a>

<div id="zoomed-image">
  <a href="#">&times;</a>
  <img src="large-image.jpg">
</div>

响应式放大实现

确保放大效果在不同设备上都能良好显示。

function responsiveZoom(img) {
  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;

  const scale = Math.min(
    viewportWidth * 0.9 / imgWidth,
    viewportHeight * 0.9 / imgHeight,
    2 // 最大放大倍数限制
  );

  img.style.transform = `scale(${scale})`;
  img.style.transformOrigin = 'center center';
}

这些方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的方式。模态框方法提供了更好的用户体验，而第三方库方案则节省开发时间。纯CSS方案无需JavaScript，适合简单场景。