使用滚动图像或按 +/- 按钮放大/缩小图像答案

【问题标题】：Zoom in/out image with Scrolling on the image or pressing +/- button使用滚动图像或按 +/- 按钮放大/缩小图像
【发布时间】：2020-07-30 01:23:36
【问题描述】：

我有一些剃须刀页面，每个页面包含 1~3 张图片。

我希望如果我将鼠标悬停在它们上并滚动，放大或缩小取决于滚动方向或者我是否按下了 + / - 按钮缩放或缩小图像。

我也想应用于所有图像而不考虑页面有多少图像。我的意思是可以使用 querySelectorAll 或类似的东西

类似于 googlemap 缩放但用于图像 (jpg/png/...)

最好全部用 JavaScript 编写

有没有提到选项的库？

有没有教程的网站？

我发现一个是 https://www.jacklmoore.com/wheelzoom/，但没有 +/- 按钮支持

提前致谢。

【问题讨论】：

标签： javascript html css asp.net razor

【解决方案1】：

我采用的方法是动态创建并注入带有事件侦听器的按钮以放大/缩小图像。下面是我的意思的一个例子，如果你需要帮助理解它的任何部分，请告诉我，

const scaleUp = image =>
{
  const scale = parseFloat(image.getAttribute('scaler'));
  image.style.transform = `scale(${scale + 0.1})`;
  image.setAttribute('scaler', Math.max(0, scale + 0.1));
};

const scaleDown = image =>
{
  const scale = parseFloat(image.getAttribute('scaler'));
  image.style.transform = `scale(${scale - 0.1})`;
  image.setAttribute('scaler', Math.max(0, scale - 0.1));
};

(async () =>
{
  const images = document.querySelectorAll('img');
  
  const buttonContainer = document.createElement('div');
  buttonContainer.style.position = 'absolute';
  buttonContainer.style.bottom = '15px';
  buttonContainer.style.width = '100%';
  buttonContainer.style.textAlign = 'center';
  
  for (let image of images)
  {
    await image.decode();
    const container = document.createElement('div');
    container.style.position = 'relative';
    container.style.display = 'inline-block';
    container.style.overflow = 'hidden';
    container.style.width = image.clientWidth;
    container.style.height = image.clientHeight;
    
    const containerImage = image.cloneNode();
    containerImage.setAttribute('scaler', '1');
    
    const plusButton = document.createElement('button');
    const minusButton = document.createElement('button');
    plusButton.textContent = '+';
    minusButton.textContent = '-';
    
    plusButton.addEventListener('click', () => scaleUp(containerImage), true);
    minusButton.addEventListener('click', () => scaleDown(containerImage), true);
    
    container.addEventListener('wheel', event =>
    {
      event.preventDefault();
      
      if (event.deltaY < 0) 
        scaleUp(containerImage);
      else if (event.deltaY > 0)
        scaleDown(containerImage);
    }, true);
    
    const imageButtonContainer = buttonContainer.cloneNode();
    imageButtonContainer.appendChild(minusButton);
    imageButtonContainer.appendChild(plusButton);
    
    container.appendChild(containerImage);
    container.appendChild(imageButtonContainer);
    image.replaceWith(container);
  }
})();

<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/002.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/003.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/005.png" />
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/006.png" />

【讨论】：

没错，这就是我要搜索的内容，但我还需要使用滚轮进行缩放
啊哈错过了那部分，更新为根据 wheel 事件上的鼠标方向滚动。请查看此解决方案是否适合您并接受答案：)

【解决方案2】：

我在以前的项目中尝试过类似的方法，也许可以尝试使用以下资源作为指导；

https://ihatetomatoes.net/how-to-zoom-into-an-image-on-scroll/

您可以尝试使用他们建议的脚本：

<script src="js/skrollr.js"></script>

【讨论】：

jacklmoore.com/wheelzoom 我在想这样的事情也支持 + / - 按钮
哦，我明白了，这看起来更像是您正在寻找的东西。希望它有效:)