我有一些 razor 頁面，每個頁面包含 1~3 張圖像。我希望如果我將鼠標懸停在它們上并滾動，放大或縮小取決于滾動方向，或者如果我按下 + / - 按鈕縮放或縮小圖像。我也想應用于所有圖像，而不考慮頁面有多少圖像。我的意思是使用 querySelectorAll 或類似的東西適用類似于 googlemap 縮放，但適用于圖像（jpg/png/...）最好全部用 JavaScript 編寫有沒有提到過選項的圖書館？
2 回答
慕村9548890
TA貢獻1884條經驗 獲得超4個贊
我采取的方法是動態創建按鈕并將其注入事件偵聽器以放大/縮小圖像。下面是我的意思的一個例子，如果您需要幫助理解其中的任何部分，請告訴我，
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" />
- 2 回答
- 0 關注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消