Todos nós vimos esses efeitos, usando a roda do mouse para obter o aumento ou diminuição do número de uma determinada forma, ou a roda de rolagem controla a esquerda e a direita de um botão e rola para cima e para baixo. Tudo isso é alcançado através do monitoramento de eventos da JS da roda do mouse. Hoje vou apresentar um pouco de JS simples, ouvindo os eventos da roda do mouse.
Eventos diferentes em diferentes navegadores
Primeiro de tudo, diferentes navegadores têm diferentes eventos de rolagem. Existem principalmente dois tipos: OnMousewheel (o Firefox não suporta) e DommouSescroll (apenas suportes do Firefox). Não vou explicar esses dois eventos em detalhes aqui. Se você quiser saber, mova -se: Mouse Wheel (roda de mouse) e eventos DommouSesCroll.
Além disso, a audição de eventos precisa ser adicionada durante a operação, o código é o seguinte: Compatível com o Firefox, use addEventListener para ouvir
Copie o código da seguinte forma:/*Evento de registro*/
if (document.addeventListener) {
document.addeventListener ('DommouSescroll', scrollfunc, false);
} // w3c
window.onMouseWheel = document.onmousewheel = scrollfunc; // ie/ópera/chrome
JS retorna um valor numérico para determinar a subir e para baixo da roda de rolagem
A compatibilidade também deve ser considerada no navegador ao determinar se a roda de rolagem está para cima ou para baixo. Agora, o Firefox usa detalhes nos cinco principais navegadores (ou seja, ópera, safari, firefox, chrome) e as outras quatro categorias usam Wheeldelta; Os dois são apenas inconsistentes em termos de valores, o que significa que o significado é consistente. Detalhes e WheelDelta levam apenas dois valores cada, os detalhes levam apenas ± 3, o WheelDelta leva apenas ± 120, onde números positivos são representados como os números negativos e são representados como diminuídos.
O código específico é o seguinte:
A cópia do código é a seguinte:
<Label para = "Wheeldelta"> Valor de rolagem: </celt> (ie/ópera) <input type = "text" id = "wheeldelta"/>
<Label para = "Detalhe"> Valor de rolagem: (Firefox) </Label> <input type = "text" id = "detalhe"/>
<script type = "text/javascript">
var scrollfunc = function (e) {
e = e || Window.Event;
var t1 = document.getElementById ("wheeldelta");
var t2 = document.getElementById ("detalhe");
if (e.weeldelta) {// ie/Ópera/Chrome
T1.Value = E.WheelDelta;
} else if (e.detail) {// firefox
T2.Value = E.Detail;
}
}
/*Evento de registro*/
if (document.addeventListener) {
document.addeventListener ('DommouSescroll', scrollfunc, false);
} // w3c
window.onMouseWheel = document.onmousewheel = scrollfunc; // ie/ópera/chrome
</script>
Ao executar o código acima, podemos ver:
A cópia do código é a seguinte:
Nos navegadores que não são do Firefox, o valor retornado pela rolagem da roda de rolagem é 120, e o valor retornado pela rolagem para baixo é -120
No navegador Firefox, o valor retornado pela rolagem da roda de rolagem é -3 e o valor retornado pela rolagem para baixo é 3.
A parte do código é a seguinte: E.WheelDelta determina se é um navegador não-Firefox, e E.Detail é um navegador Firefox
if (e.weeldelta) {// ie/Ópera/Chrome
T1.Value = E.WheelDelta;
} else if (e.detail) {// firefox
T2.Value = E.Detail;
}
PS: Aqui eu recomendo uma ferramenta de consulta on -line sobre eventos JS, que resume os tipos de eventos e funções de eventos comumente usados de JS:
Uma lista completa de eventos e funções JavaScript:
http://tools.vevb.com/table/javascript_event