|
|||||||
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция |
Более сложный Web-сценарийВ прошлой главе говорилось об анимации. Давайте же рассмотрим Web-сценарий, анимирующий какой-либо элемент страницы, а именно, заставляющий его двигаться по горизонтали взад-вперед. Вы увидите, что все это делается очень просто и довольно очевидно. <HTML> <HEAD> <ТIТLЕ>Анимация</ТIТLЕ> <STYLE> DIV { font-size: 72; font-weight: bold } </STYLE> <SCRIPT> var dx,timer; dx = 2; function movelmage () { livediv. style. pixelLeft += dx; if (livediv. style. pixelLeft + livediv. style. pixelWidth) document.body.clientWidth) dx = -dx; if (livediv. style. pixelLeft <= 0) dx = -dx; } function setupAnimation() ( timer = window. setlnterval ("movelmage ()", 100) } </SCRIPT> </HEAD> <BODY onLoad="setupAnimation(); "> <DIV lD="div1" STYLE="top: 50; left: 50; position: absolute; z-index: 1">J</DIV> <DIV ID="div2" STYLE="top: 50; left: 100; position: absolute; z-index: -1">a</DIV> <DIV ID="div3" STYLE="top: 50; left: 150; position: absolute; z-index: 1">v</DIV> <DIV ID="div4" STYLE="top: 50; left: 200; position: absolute; z-index: -1">a</DIV> <DIV ID="livediv" STYLE="top: 80; left: 0; width: 30; position: absolute"><IMG SRC="tips.gif "></DIV> </BODY> </HTML> Сохраните этот код в файле под именем 13.2.htm. Графическое изображение tips.gif, использованное в этом примере, вы можете найти в папке Web, вложенной в папку Windows или WinNT. Поместите файл tips.gif в ту же папку, где находится файл 13.2.htm, после чего откройте последний в Web-обозревателе. К сожалению, рис. 13.2 не может передать движение. Рассмотрение кода нашего примера начнем с секции HTML-заголовка страницы (тег <HEAD>). Здесь у нас находится небольшая таблица стилей с единственным стилем, переопределяющим шрифт тега <DIV>. Но, кроме того, здесь располагается код сценария. Он-то нас и интересует. Этот код включает определение двух функций: setupAnimation И movelmage. Первая функция выполняет некие предустановки, необходимые для правильной работы анимации, а вторая — осуществляет само движение аними-рованного элемента. (В дальнейшем вы тоже старайтесь давать вашим функциям "говорящие" имена.) Но, кроме этих функций, здесь есть и другой код, выполняющийся при загрузке страницы: var dx, timer; dx = 2; В этом коде мы объявляем две переменные: dx и timer. Первая из них задает значение приращения, "скачка" анимации, и с ней все понятно. Мы присваиваем ей значение 2; если движение анимированного элемента покажется вам слишком медленным, вы можете это значение увеличить. А вот второй переменной займемся поближе. Рис. 13.2. Анимированный элемент страницы Уже не раз говорилось, что анимация всегда привязывается к системному таймеру. Это позволяет проигрывать одно и то же "кино" и на самых медленных, и на самых быстрых компьютерах с одинаковой скоростью. Как правило, делается это следующим образом: пишется специальная функция-обработчик события "тика" этого системного таймера, которая и заставляет анимированный элемент двигаться. Для того чтобы привязать функцию-обработчик к событию "тика" таймера, нужно использовать метод setintervai объекта window. Этот метод принимает в качестве параметра строку с именем функции-обработчика и интервал между "тиками" в миллисекундах, а возвращает особое значение, называемое идентификатором интервала. Впоследствии, когда анимация должна быть закончена, нужно будет вызвать метод ciearinterval объекта window, передав ему этот самый идентификатор. Но, т. к. у нас анимация проигрывается бесконечно, то и метод ciearinterval не вызывается, и идентификатор, хранимый в переменной timer, фактически не нужен. Функцию-обработчик мы привязываем к "тику" таймера в функции setupAnimation. Ее код приведен ниже. function setupAnimation() { timer = window.setlnterval("movelmage()", 100) } Эта функция, в свою очередь, является обработчиком события onLoad, возникающего сразу по окончании загрузки Web-страницы. В качестве параметров метода setlnterval МЫ Передаем ИМЯ функции movelmage И 100 - интервал между "тиками" в миллисекундах. Обратите также внимание на следующий код: <BODY onLoad="setupAnimation();"> С его помощью к событию onLoad привязывается функция-обработчик. Обратимся теперь к функции, выполняющей движение анимированного элемента, — movelmage. Ее код выглядит так: function movelmage() { livediv.style.pixelLeft += dx; if (livediv.style.pixelLeft + livediv.style.pixelWidth >= document.body.clientwidth) dx = -dx; if (livediv.style.pixelLeft <= 0) dx = -dx; } Разберем его по строкам. Первая строка: livediv.style.pixelLeft += dx; или, как понятнее, livediv.style.pixelLeft = livediv.style.pixelLeft + dx; увеличивает значение свойства pixelLeft объекта style на значение переменной dx. Свойство pixelLeft представляет значение горизонтальной координаты элемента страницы в пикселах. Вторая строка: if (livediv.style.pixelLeft + livediv.style.pixelWidth >= document.body.clientwidth) dx = -dx; осуществляет проверку, дошел ли анимированный элемент до правого края страницы. Для этого мы сначала складываем значение уже знакомого свойства pixelLeft и нового свойства pixeiwidth, представляющего ширину элемента страницы в пикселах. После этого мы сравниваем получившуюся сумму со значением свойства ciientwidth объекта body и, если она стала больше этого значения, меняем знак у значения переменной dx. Свойство ciientwidth представляет ширину элемента страницы в пикселах, а объект body — саму Web-страницу, значит, выражение body.clientwidth возвращает значение ширины всей страницы в пикселах. И последняя, третья, строка: if (livediv. style. pixelLeft <= 0) dx = -dx; осуществляет проверку, дошел ли анимированный элемент до левого края страницы. Для этого мы просто сравниваем значение свойства pixelLeft с нулем и, если оно стало меньше нуля, изменяем знак значения переменной dx. После того как мы сменим знак значения dx, анимированный элемент "поедет" в противоположную сторону. Таким образом, анимация будет проигрываться бесконечно. Кстати, рассмотренный нами Web-сценарий не будет работать только в Navigator 4.x. Чтобы он работал в этой капризной программе, его нужно немного изменить. Измененный код страницы 13.2.htm по имени 13.3.htm приведен ниже. Подробно описываться он не будет — попробуйте разобраться с этим кодом сами, на досуге. if (livediv. style. pixelLeft <= 0) dx = -dx; <HTML> <HEAD> <TITLE>Анимация</TITLE> <SCRIPT> var dx, timer; dx = 2; function move Image () { document. livediv. left += dx; if (document. livediv. left >= document.width) dx = -dx; if (document. livediv. left <= 0) dx = -dx; } function setupAnimation () { timer = window. setlnterval ("movelmage () ", 100) } </SCRIPT> </HEAD> <BODY onLoad="setupAnimation(); " STYLE="font-size: 72; font-weight: bold"> <DIV ID="div1" STYLE="top: 50; left: 50; position: absolute; z-index: 1">J</DIV> <DIV ID="div2" STYLE="top: 50; left: 100; position: absolute; <DIV ID="div3" STYLE="top: 50; left: 150; position: absolute; z-index: l">v</DIV> <DIV ID="div4" STYLE="top: 50; left: 200; position: absolute; z-index: -l">a</DIV> <DIV ID="livediv" STYLE="top: 80; left: 0; width: 30; position: absolute">'<IMG SRC="tips.gif"></DIV> </BODY> </HTML> Правда, исправленный вариант страницы перестанет работать в других Web-обозревателях... Вот такая анимация... Поиск по сайту: |
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.006 сек.) |