События колесика мыши

С тех пор, как у «манипулятора типа мышь» появилось колесико, вся прогрессивная веб — общественность ждала, когда же событие прокрутки этого механизма можно будет обрабатывать в сценариях. Что? Вы не ждали? Ну, в общем, я как-то тоже. Но все равно свершилось — ведь будущее не остановить! В общем, заказывали или нет — получайте.

Поместим на странице рисунок больших размеров:

<img id=»wideImg» width=600px src=»Sleeve. jpg» />

И код, добавляющий к нему событие прокрутки мыши:

<script> var img:

Window. onload = function(){

Img = document. getElementById(»wideImg»);

Img. addEventListener(”mousewheel”, resize, false);

Img. addEventListenerC’DOMMouseScroll», resize, false);

}

Ну да, событий пришлось рассматривать больше одного — mouse-wheel понятен Google Chrome, Safari и Opera, DOMMouseScroll — для Mozilla Firefox.

Не будем огорчаться — этот API еще совсем сырой. Лучше напишем реализацию функции resize, увеличивающей или уменьшающей размеры картинки при прокрутке над ней колесика мыши, в зависимости от направления действия:

Function resize(e) {

Var delta = Math. max(-1, Math. min(1, (e. wheelDelta || — e. detail)));

Img. style. width = Math. max(50, Math. min(800, img. width + (30 * delta))) + "px"; return false:

}