当前位置：首页 > JavaScript

js实现点击图片放大

2026-04-04 07:24:28JavaScript

使用原生JavaScript实现图片点击放大

创建一个简单的图片点击放大功能可以通过监听图片的点击事件，并在点击时切换CSS类来实现。

// 获取所有需要放大的图片
const images = document.querySelectorAll('.zoomable-image');

// 为每张图片添加点击事件
images.forEach(img => {
  img.addEventListener('click', function() {
    this.classList.toggle('zoomed');
  });
});

/* 基础样式 */
.zoomable-image {
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 放大后的样式 */
.zoomable-image.zoomed {
  transform: scale(1.5);
  position: relative;
  z-index: 100;
}

使用模态框实现高级放大效果

对于更专业的放大效果，可以创建一个模态框来显示放大的图片。

// 创建模态框元素
const modal = document.createElement('div');
modal.id = 'image-modal';
modal.innerHTML = `
  <span class="close-modal">&times;</span>
  <img class="modal-content" id="modal-image">
`;
document.body.appendChild(modal);

// 获取所有图片并添加点击事件
document.querySelectorAll('.zoomable-image').forEach(img => {
  img.addEventListener('click', function() {
    const modalImg = document.getElementById('modal-image');
    modalImg.src = this.src;
    modal.style.display = 'block';
  });
});

// 关闭模态框
document.querySelector('.close-modal').addEventListener('click', function() {
  modal.style.display = 'none';
});

#image-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

使用第三方库实现更丰富的效果

如果需要更丰富的动画效果和交互，可以考虑使用第三方库如Lightbox、Fancybox或Magnific Popup。

<!-- 引入Magnific Popup库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<script>
$(document).ready(function() {
  $('.image-popup').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
      verticalFit: true
    }
  });
});
</script>

响应式图片放大方案

确保放大效果在不同设备上都能良好工作，可以添加响应式处理。

js实现点击图片放大

function handleImageZoom() {
  const images = document.querySelectorAll('.responsive-zoom');

  images.forEach(img => {
    img.addEventListener('click', function() {
      if (window.innerWidth < 768) {
        // 移动设备全屏显示
        this.classList.toggle('fullscreen-mobile');
      } else {
        // 桌面设备缩放显示
        this.classList.toggle('zoomed-desktop');
      }
    });
  });
}

// 监听窗口大小变化
window.addEventListener('resize', handleImageZoom);

.fullscreen-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1000;
  background: black;
}

.zoomed-desktop {
  transform: scale(1.8);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  z-index: 100;
}