Используйте HTML5, чтобы реализовать функцию увеличения и уменьшения изображений с помощью мышиных колес

Мы с вами знаем, что добавление событий колеса мыши в веб -страницы HTML5 может лучше позволить пользователям взаимодействовать с веб -страницами. В HTML5 колесо прокрутки мыши не только может скользить вверх и вниз по веб -странице. На самом деле, вы также можете полагаться на это, чтобы выполнить больше функций, таких как увеличение и уменьшение плоскости поля зрения.

Проверьте фактический демонстрационный эффект

Большинство браузеров поддерживают события колес мыши, поэтому вы можете сначала подписаться на метод события колеса мыши. Всякий раз, когда событие запускается, вы можете получить свойство под названием Wheeldelta, которое представляет размер мыши, который просто изменился. Положительное значение указывает на то, что колесо прокрутки скользит вниз, а отрицательное значение указывает на то, что колесо прокрутки скользит. Чем больше абсолютное значение значения, тем больше диапазон скольжения.

К сожалению, все еще есть браузер, который не поддерживает события колес мыши. Это Firefox. Mozilla внедрила обработку события под названием Dommousescroll, которое пропустит параметр события с именем с названием «Свойство» под названием Detail. Тем не менее, это свойство детали отличается от WheelDelta, которое может вернуть только положительные значения, то есть оно может настаивать только на значении прокрутки колеса мыши вниз.

Вы должны уделять особое внимание, что Apple также отключила прокрутка мыши для управления страницей, скользящей вверх и вниз в браузере Safari, но эта функция все еще обычно используется в двигателе Webkit, поэтому код, который вы пишете, не вызовет какие -либо проблемы.

Во -первых, мы добавляем изображение на веб -страницу, и мы можем использовать колесо мыши, чтобы контролировать масштаб этого изображения позже.