Artigo Introdução de wulin.com (www.vevb.com): Como o HTML5 usa eventos da roda do mouse?
Adicionar eventos de roda do mouse às páginas da web HTML5 pode permitir 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.
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.
Adicionar método de manuseio de eventos de roda do mouse
Primeiro, adicionamos uma imagem à página da web e podemos usar a roda do mouse para controlar o zoom desta imagem posteriormente.
<img id = myImage src = myImage.jpg alt = minha imagem />
Agora adicione o código de processamento de eventos da roda do mouse
var myImage = document.getElementById (myimage);
if (myimage.addeventListener) {
// ie9, Chrome, Safari, Opera
MyImage.AddeventListener (Rouse Wheel, Mouse Wheelhandler, False);
// Firefox
MyImage.AddeventListener (DommousCroll, Mouse WheelHandler, False);
}
// ou seja, 6/7/8
caso contrário, MyImage.attachevent (OnMousewheel, Mouse Wheelhandler);
Práticas de processamento que podem ser suportadas por diferentes navegadores
No caso seguinte, inverteremos o valor detalhado do Firefox e retornaremos um de 1 ou -1
função mousewheelhandler (e) {
// Delta da roda de navegador cruzado
var e = window.event || e; // Antigo apoio do IE
var delta = math.max (-1, math.min (1, (e.weeldelta || -e.detail)));
Agora decidimos diretamente a faixa de tamanho da imagem. O código a seguir define o intervalo de largura da imagem entre 50-800 pixels
MyImage.style.width = Math.max (50, Math.Min (800, MyImage.width + (30 * delta)))) + px;
retornar falso;
}
No último ponto, retornamos falsos no método para encerrar o processamento padrão de eventos da roda do mouse, caso ele deslize para cima e para baixo na página da web.