JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

// Эти аргументы являются не только начальными значениями: они хранят информацию

// о текущем состоянии, изменяются и используются обработчиком события mousewheel.

framewidth = Math.max(framewidth, 50);

frameheight = Math.max(frameheight, 50);

contentX = Math.min(contentX, 0) || 0;

contentY = Math.min(contentY, 0) || 0;

//

Создать фрейм и определить для него стили и имя класса CSS

var frame = document.createElement("div");

frame.className = "enclosure"; // Благодаря этому можно определять стили

// в таблицах стилей

frame.style.width = framewidth + "px"; // Установить размеры фрейма,

frame.style.height = frameheight + "px";

frame.style.overflow = "hidden"; // Без полос прокрутки

frame.style.boxSizing = "border-box"; // модель border-box упрощает

frame.style.webkitBoxSizing = "border-box"; // вычисление новых размеров

frame.style.MozBoxSizing = "border-box"; // фрейма.

// Добавить фрейм в документ и поместить в него элемент elt.

content.parentNode.insertBefore(frame, content);

frame.appendChild(content);

// Координаты элемента относительно фрейма

content.style.position = "relative";

content.style.left = contentX + "px";

content.style.top = contentY + "px";

// Необходимо решить некоторые проблемы совместимости броузеров

var isMacWebkit = (navigator.userAgent.index0f("Macintosh") !== -1 &&

navigator.userAgent.index0f("WebKit") !== -1);

var isFirefox = (navigator.userAgent.index0f("Gecko") !== -1);

// Зарегистрировать обработчики событий mousewheel.

frame.onwheel = wheelHandler; // Для будущих броузеров

frame.onmousewheel = wheelHandler; //

Для большинства текущих броузеров

if (isFirefox) // Только Firefox

frame.addEventListener("DOMMouseScroll", wheelHandler, false);

function wheelHandler(event) {

var e = event || window.event; // Объект события, стандартный или IE

// Получить величину прокрутки из объекта события, проверив свойства объекта

// события wheel, mousewheel (в обоих, 2-мерном и 1-мерном вариантах)

// и DOMMouseScroll в Firefox.Масштабировать значение так, чтобы один «щелчок»

// колесика соответствовал 30 пикселам. Если какой-либо из броузеров в будущем

// будет возбуждать оба типа событий, "wheel" и "mousewheel", одно и то же

// событие будет обрабатываться дважды. Но будем надеяться, что отмена

// события wheel будет предотвращать возбуждение события mousewheel.

var deltaX = e.deltaX*-30 || // событие wheel

e.wheelDeltaX/4 || //mousewheel

0; // свойство не определено

var deltaY = e.deltaY*-30 || // событие wheel

e.wheelDeltaY/4 || // событие mousewheel в Webkit

(e.wheelDeltaY===undefined && // Если нет 2-мерного свойства,

e.wheelDelta/4) || // использовать 1-мерное свойство

e.detail*-10 || // событие DOMMouseScroll в Firefox

0; // свойство не определено

// Большинство броузеров генерируют одно событие со значением 120

// на один щелчок колесика. Однако похоже, что мыши компании Apple

// более чувствительные, и значения свойств delta часто оказываются

// в несколько раз больше 120, по крайней мере, для Apple Mouse.

// Использовать прием проверки типа броузера, чтобы решить эту проблему,

if (isMacWebkit) {