Введение в статью Wulin.com (www.vevb.com): Как HTML5 использует события колес мыши?
Добавление событий мыши колес на веб -страницы HTML5 может лучше позволить пользователям взаимодействовать с веб -страницами. В HTML5 колесо прокрутки мыши не только может скользить вверх и вниз по веб -странице. На самом деле, вы также можете полагаться на это, чтобы выполнить больше функций, таких как увеличение и уменьшение плоскости поля зрения.
Большинство браузеров поддерживают события колес мыши, поэтому вы можете сначала подписаться на метод события колеса мыши. Всякий раз, когда событие запускается, вы можете получить свойство под названием Wheeldelta, которое представляет размер мыши, который просто изменился. Положительное значение указывает на то, что колесо прокрутки скользит вниз, а отрицательное значение указывает на то, что колесо прокрутки скользит. Чем больше абсолютное значение значения, тем больше диапазон скольжения.
К сожалению, все еще есть браузер, который не поддерживает события колес мыши. Это Firefox. Mozilla внедрила обработку события под названием Dommousescroll, которое пропустит параметр события с именем с названием «Свойство» под названием Detail. Тем не менее, это свойство детали отличается от WheelDelta, которое может вернуть только положительные значения, то есть оно может настаивать только на значении прокрутки колеса мыши вниз.
Вы должны уделять особое внимание, что Apple также отключила прокрутка мыши для управления страницей, скользящей вверх и вниз в браузере Safari, но эта функция все еще обычно используется в двигателе Webkit, поэтому код, который вы пишете, не вызовет какие -либо проблемы.
Добавить метод обработки событий колеса мыши
Во -первых, мы добавляем изображение на веб -страницу, и мы можем использовать колесо мыши, чтобы контролировать масштаб этого изображения позже.
<img id = myimage src = myimage.jpg alt = my -изображение />
Теперь добавьте код обработки событий мыши колеса
var myImage = document.getElementById (myImage);
if (myimage.addeventlistener) {
// IE9, Chrome, Safari, Opera
myimage.addeventlistener (мышиный колес
// Firefox
myimage.addeventlistener (Dommousescroll, Mousewheelhandler, false);
}
// т.е. 6/7/8
иначе myimage.attachevent (Onmousewheel, MouseWheelhandler);
Практики обработки, которые могут быть поддержаны различными браузерами
В следующем случае мы будем обращать подробное значение Firefox и вернем один из 1 или -1
Функция MouseWheelHandler (e) {
// Delta Cross-Browser Wheel Delta
var e = window.event || E; // Старая поддержка IE
var delta = math.max (-1, math.min (1, (e.wheeldelta || -e.detail)));
Теперь мы непосредственно решаем диапазон размеров картинки. Следующий код устанавливает диапазон ширины изображения между 50-800 пикселями
myimage.style.width = math.max (50, math.min (800, myimage.width + (30 * delta))) + px;
вернуть ложь;
}
Последний момент, мы возвращаем False в методе для прекращения стандартной обработки событий мыши в случае, если она скользит вверх и вниз по веб -странице.