JavaScript、CSS实现图片点击放大效果，可用于wordpress

需求

我需要点击放大图片，全屏展示，并通过鼠标滚轮控制放大的倍数

代码

要实现鼠标滚轮控制放大倍数，你可以使用JavaScript来监听鼠标滚轮事件，并根据滚轮的方向来调整放大倍数。以下是一个示例代码：

document.addEventListener('DOMContentLoaded', function() {
  var images = document.querySelectorAll('.article-inner img');
  images.forEach(function(image) {
    image.addEventListener('click', function() {
      var fullscreenDiv = document.createElement('div');
      fullscreenDiv.classList.add('fullscreen');
      var fullscreenImg = document.createElement('img');
      fullscreenImg.src = this.src;
      fullscreenImg.alt = this.alt;
      fullscreenDiv.appendChild(fullscreenImg);
      document.body.appendChild(fullscreenDiv);

      var scale = 1;
      fullscreenDiv.addEventListener('wheel', function(event) {
        event.preventDefault();
        var delta = event.deltaY || event.detail || event.wheelDelta;
        if (delta > 0) {
          // 向下滚动，缩小图片
          scale -= 0.1;
        } else {
          // 向上滚动，放大图片
          scale += 0.1;
        }
        fullscreenImg.style.transform = 'scale(' + scale + ')';
      });

      fullscreenDiv.addEventListener('click', function() {
        this.remove();
      });
    });
  });
});

在上面的JavaScript代码中，我们使用querySelectorAll()方法选择所有具有.article-inner img选择器的<img>元素，并为每个元素添加点击事件。当点击<img>时，我们创建一个新的<div>元素，并将<img>元素插入其中。我们将新创建的<div>元素添加一个fullscreen类，用于设置全屏展示的样式。我们将新创建的<div>元素插入到document.body中，使其成为整个页面的子元素。我们还为新创建的<div>元素添加了一个点击事件，以实现点击全屏展示的图片后，再次点击则还原。
我们添加了一个wheel事件监听器来监听鼠标滚轮事件。当滚轮向下滚动时，我们将放大倍数减小0.1；当滚轮向上滚动时，我们将放大倍数增加0.1。然后，我们使用style.transform属性将新的放大倍数应用到图片上。

通过以上步骤，你可以实现在全屏展示图片时，通过鼠标滚轮来控制放大倍数。根据需要，你可以根据自己的样式和需求调整CSS和JavaScript代码。
CSS代码：

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.fullscreen img {
  max-width: 100%;
  max-height: 100%;
}

我们定义了一个fullscreen类，它具有全屏展示的样式。通过设置position: fixed;、top: 0;、left: 0;、width: 100%;和height: 100%;来使图片全屏展示。通过设置background-color来添加一个半透明的背景色。使用display: flex;、justify-content: center;和align-items: center;来使图片居中显示。通过设置z-index来确保图片在页面上方。使用max-width: 100%;和max-height: 100%;来确保图片在全屏展示时不会失真。

wordpress应用

把js代码放到主题页脚 (footer.php)内，用<script></script>包裹。
把css代码放到自定义css内。