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

Флэнаган Дэвид
Шрифт:

<script src="whenReady.js"></script>

<script src="Enclose. js"x/script>

<script>

whenReady(function {

enclose(document.getElementById("content"). 400,200, -200, -300);

});

</script>

<style>div.enclosure { border: solid black 10px; margin: 10px; }</style>

<img id="content" src="testimage.jpg"/>

Для обеспечения корректной работы во всех основных броузерах в примере 17.3 выполняется проверка типа броузера (раздел 13.4.5). Пример опирается на положения спецификации «DOM Level 3 Events» и включает программный код, который будет использовать событие «wheel», когда его поддержка будет реализована в броузерах. [47]

47

Довольно рискованное решение: если будущие версии стандарта не будут соответствовать проекту спецификации, имевшейся на момент написания этих строк, это может привести к нежелательным последствиям и сделать пример неработоспособным.

Он также включает дополнительную проверку на будущее, чтобы не использовать событие «DOMMouseScroll», если Firefox начнет использовать событие «wheel» или «mousewheel». Обратите внимание, что пример 17.3 также является практическим примером управления геометрией элементов и использования приемов позиционирования средствами CSS, о которых рассказывалось в разделах 15.8 и 16.2.1.

Пример 17.3. Обработка событий «mousewheel»

// Заключает элемент содержимого в фрейм, или видимую область заданной ширины

// и высоты (минимальные размеры 50x50). Необязательные аргументы contentX

// и contentY определяют начальное смещение содержимого относительно кадра.

// (Их значения должны быть <= 0.) Фрейму придается обработчик события mousewheel,

// который позволяет пользователю прокручивать элемент и изменять размеры фрейма,

function enclose(content, framewidth, frameheight, contentX, contentY) {

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

// о текущем состоянии, изменяются и используются обработчиком события 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";

<