JS 图片点击放大特效实现方法：简单易懂代码示例

以下是一个简单的示例，可以通过点击图片实现放大的特效：

HTML 代码：

<img src='your-image-src.jpg' alt='your-image' class='zoomable'>

CSS 代码：

.zoomable {
  cursor: pointer;
  transition: transform 0.2s;
}

.zoomable:hover {
  transform: scale(1.1);
}

JavaScript 代码：

const zoomableImages = document.querySelectorAll('.zoomable');

zoomableImages.forEach(image => {
  image.addEventListener('click', () => {
    image.classList.toggle('zoomed');
  });
});

在 CSS 中，我们定义了一个名为 'zoomable' 的类，它使鼠标指针变为光标，并在悬停时将图像缩放 1.1 倍。在 JavaScript 中，我们获取所有具有 'zoomable' 类的图像，并为每个图像添加一个单击事件监听器。在单击事件处理程序中，我们简单地切换图像的 'zoomed' 类，该类在 CSS 中定义了一个更大的缩放级别。当我们单击图像时，它将变得更大，再次单击时它将恢复到其原始大小。