通过在图像上滚动或按 +/- 按钮放大/缩小图像

Question

我有一些 razor 页面，每个页面包含 1~3 张图像。

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

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

类似于 googlemap 缩放，但适用于图像（jpg/png/...）

最好全部用 JavaScript 编写

有没有提到过选项的图书馆？

Answer 1

您可以尝试使用他们建议的脚本：<script src="js/skrollr.js"></script>

Answer 2

我采取的方法是动态创建按钮并将其注入事件侦听器以放大/缩小图像。下面是我的意思的一个例子，如果您需要帮助理解其中的任何部分，请告诉我，const scaleUp = image =>{&nbsp; const scale = parseFloat(image.getAttribute('scaler'));&nbsp; image.style.transform = `scale(${scale + 0.1})`;&nbsp; image.setAttribute('scaler', Math.max(0, scale + 0.1));};const scaleDown = image =>{&nbsp; const scale = parseFloat(image.getAttribute('scaler'));&nbsp; image.style.transform = `scale(${scale - 0.1})`;&nbsp; image.setAttribute('scaler', Math.max(0, scale - 0.1));};(async () =>{&nbsp; const images = document.querySelectorAll('img');&nbsp;&nbsp;&nbsp; const buttonContainer = document.createElement('div');&nbsp; buttonContainer.style.position = 'absolute';&nbsp; buttonContainer.style.bottom = '15px';&nbsp; buttonContainer.style.width = '100%';&nbsp; buttonContainer.style.textAlign = 'center';&nbsp;&nbsp;&nbsp; for (let image of images)&nbsp; {&nbsp; &nbsp; await image.decode();&nbsp; &nbsp; const container = document.createElement('div');&nbsp; &nbsp; container.style.position = 'relative';&nbsp; &nbsp; container.style.display = 'inline-block';&nbsp; &nbsp; container.style.overflow = 'hidden';&nbsp; &nbsp; container.style.width = image.clientWidth;&nbsp; &nbsp; container.style.height = image.clientHeight;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const containerImage = image.cloneNode();&nbsp; &nbsp; containerImage.setAttribute('scaler', '1');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const plusButton = document.createElement('button');&nbsp; &nbsp; const minusButton = document.createElement('button');&nbsp; &nbsp; plusButton.textContent = '+';&nbsp; &nbsp; minusButton.textContent = '-';&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; plusButton.addEventListener('click', () => scaleUp(containerImage), true);&nbsp; &nbsp; minusButton.addEventListener('click', () => scaleDown(containerImage), true);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; container.addEventListener('wheel', event =>&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (event.deltaY < 0)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; scaleUp(containerImage);&nbsp; &nbsp; &nbsp; else if (event.deltaY > 0)&nbsp; &nbsp; &nbsp; &nbsp; scaleDown(containerImage);&nbsp; &nbsp; }, true);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const imageButtonContainer = buttonContainer.cloneNode();&nbsp; &nbsp; imageButtonContainer.appendChild(minusButton);&nbsp; &nbsp; imageButtonContainer.appendChild(plusButton);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; container.appendChild(containerImage);&nbsp; &nbsp; container.appendChild(imageButtonContainer);&nbsp; &nbsp; image.replaceWith(container);&nbsp; }})();<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" />