Use HTML5 para realizar a função de aumentar e reduzir as imagens com eventos da roda do mouse

Você e eu sabemos que adicionar eventos de roda do mouse às páginas da web HTML5 pode permitir melhor que os usuários interajam com as páginas da Web. No HTML5, a roda de rolagem do mouse não apenas pode deslizar para cima e para baixo na página da web. De fato, você também pode confiar nisso para concluir mais funções, como aumentar e reduzir o plano do campo de visão.

Confira o efeito de demonstração real

A maioria dos navegadores suporta eventos de roda do mouse, para que você possa se inscrever primeiro no método de eventos da roda do mouse. Sempre que o evento é acionado, você pode obter uma propriedade chamada Wheeldelta, que representa o tamanho da roda do mouse que acabou de alterar. Um valor positivo indica que a roda de rolagem desliza para baixo e um valor negativo indica que a roda de rolagem desliza para cima. Quanto maior o valor absoluto do valor, maior a faixa deslizante.

Infelizmente, ainda há um navegador que não suporta eventos de roda do mouse. Isso é Firefox. A Mozilla implementou o processamento de um evento chamado DommouSescroll, que passará por um parâmetro de evento nomeado com uma propriedade chamada detalhe. No entanto, essa propriedade detalhada é diferente de Wheeldelta, que só pode retornar valores positivos, ou seja, só pode insistir no valor da roda do mouse rolar para baixo.

Você deve prestar atenção especial de que a Apple também desativou a rolagem do mouse para controlar a página deslizando para cima e para baixo no navegador Safari, mas essa função ainda é usada normalmente no mecanismo Webkit, para que o código que você escreve não desencadeará nenhum problema.

Primeiro, adicionamos uma imagem à página da web e podemos usar a roda do mouse para controlar o zoom desta imagem posteriormente.