Мы все видели эти эффекты, используя колесо мыши для достижения увеличения или уменьшения числа в определенной форме, или колесо прокрутки управляет левой и справа от кнопки и прокручивает вверх и вниз. Все они достигаются за счет мониторинга событий JS на колесе мыши. Сегодня я представлю немного простых прослушивания JS для мышиных колес.
Разные события в разных браузерах
Прежде всего, разные браузеры имеют разные события прокрутки. В основном есть два типа: Onmousewheel (Firefox не поддерживает) и Dommousescroll (только Firefox поддерживает). Я не буду объяснять эти два события подробно здесь. Если вы хотите знать, пожалуйста, перемещайте: мышиные колеса (мышиное колесо) и события Dommousescroll.
Кроме того, прослушивание событий необходимо добавить во время работы, код следующим образом: совместим с Firefox, используйте AddeventListener для прослушивания
Скопируйте код следующим образом:/*Зарегистрировать событие*/
if (document.addeventlistener) {
document.addeventlistener ('dommousescroll', scrollfunc, false);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
JS возвращает численное значение, чтобы определить вверх и вниз колесо прокрутки
Совместимость также должна рассматриваться в браузере при определении того, находится ли колесо прокрутки вверх или вниз. Теперь Firefox использует детали в пяти основных браузерах (то есть, Opera, Safari, Firefox, Chrome), а остальные четыре категории используют Wheeldelta; Эти два непоследовательны только с точки зрения значений, что означает, что значение является последовательным. Детали и WheelDelta занимают только два значения, в деталях требуется только ± 3, WheelDelta занимает только ± 120, где положительные числа представлены в виде UP, а отрицательные числа представлены в виде вниз.
Конкретный код заключается в следующем:
Кода -копия выглядит следующим образом:
<Метка для = "WheelDelta"> Значение прокрутки: </label> (IE/Opera) <input Type = "text" ID = "WheelDelta"/>
<метка для = "Detail"> Значение прокрутки: (Firefox) </label> <input type = "text" id = "detail"/>
<script type = "text/javascript">
var scrollfunc = function (e) {
e = e || window.event;
var t1 = document.getElementbyId ("wheldelta");
var t2 = document.getElementbyId ("detail");
if (e.wheeldelta) {// ie/opera/chrome
t1.value = e.wheeldelta;
} else if (e.detail) {// Firefox
t2.value = e.detail;
}
}
/*Зарегистрировать событие*/
if (document.addeventlistener) {
document.addeventlistener ('dommousescroll', scrollfunc, false);
} // w3c
window.onmousewheel = document.onmousewheel = scrollfunc; // ie/opera/chrome
</script>
Запустив приведенный выше код, мы можем увидеть:
Кода -копия выглядит следующим образом:
В браузерах без Firefox значение, возвращенное прокруткой колеса прокрутки, составляет 120, а значение, возвращаемое прокруткой вниз, составляет -120
В браузере Firefox значение, возвращаемое прокруткой колеса прокрутки, составляет -3, а значение, возвращаемое прокруткой вниз, составляет 3.
Кодовая часть заключается в следующем: E.Wheeldelta определяет, является ли это браузером без FireFox, а E.Detail-это браузер Firefox
if (e.wheeldelta) {// ie/opera/chrome
t1.value = e.wheeldelta;
} else if (e.detail) {// Firefox
t2.value = e.detail;
}
PS: Здесь я рекомендую инструмент онлайн -запроса о событиях JS, который суммирует широко используемые типы событий и функции функций JS:
Полный список событий и функций JavaScript:
http://tools.vevb.com/table/javascript_event