Более сложный Web - сценарий
В прошлой главе говорилось об анимации. Давайте же рассмотрим Web -сценарий, анимирующий какой-либо элемент страницы, а именно, заставляющий его двигаться по горизонтали взад-вперед. Вы увидите, что все это делается очень просто и довольно очевидно.
<HTML>
<HEAD>
< TITLE > Анимация </ TITLE >
<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 setupftnimation ( ) {
timer = window.setlnterval ("movelmage () ", 100)
}
</SCRIPT>
</HEAD>
<BODY onLoad="setupAnimation () ;">
<DIV ID="divl" STYLE="top: 50; left: 50; position: absolute;
z-index: 1">J</DIV>
<DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;
z-index: -l">a</DIV>
<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>
Сохраните этот код в файле под именем 13.2.htm . Графическое изображение tips .gif , использованное в этом примере, вы можете найти в папке Web , вложенной в папку Windows или WinNT . Поместите файл tips.gif в ту же папку, где находится файл 13.2.htm , после чего откройте последний в Web -обозревателе. Рассмотрение кода нашего примера начнем с секции HTML -заголовка страницы (тег < head >). Здесь у нас находится небольшая таблица стилей с единственным стилем, переопределяющим шрифт тега < div >. Но, кроме того, здесь располагается код сценария. Он-то нас и интересует.
ЭТОТ КОД Включает определение Двух функций: setupAnimation и movelmage .
Первая функция выполняет некие предустановки, необходимые для правильной работы анимации, а вторая — осуществляет само движение анимированного элемента. (В дальнейшем вы тоже старайтесь давать вашим функциям "говорящие" имена.) Но, кроме этих функций, здесь есть и другой код, выполняющийся при загрузке страницы:
var dx , timer ;
dx = 2;
В этом коде мы объявляем две переменные: dx и timer . Первая из них задает значение приращения, "скачка" анимации, и с ней все понятно. Мы присваиваем ей значение 2; если движение анимированного элемента покажется вам слишком медленным, вы можете это значение увеличить. А вот второй переменной займемся поближе.
Уже не раз говорилось, что анимация всегда привязывается к системному таймеру. Это позволяет проигрывать одно и то же "кино" и на самых медленных, и на самых быстрых компьютерах с одинаковой скоростью. Как правило, делается это следующим образом: пишется специальная функция-обработчик события "тика" этого системного таймера, которая и заставляет анимированный элемент двигаться.
Для того чтобы привязать функцию - обработчик к событию "тика" таймера, нужно использовать метод setlnterval объекта window . Этот метод принимает в качестве параметра строку с именем функции-обработчика и интервал между "тиками" в миллисекундах, а возвращает особое значение, называемое идентификатором интервала. Впоследствии, когда анимация должна быть закончена, нужно будет вызвать метод ciearintervai объекта window , передав ему этот самый идентификатор. Но, т. к. у нас анимация проигрывается бесконечно, то и метод ciearintervai не вызывается, и идентификатор, хранимый в переменной 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 и нового свойства pixelWidth , представляющего ширину элемента страницы в пикселах. После этого мы сравниваем получившуюся сумму со значением свойства clientwidth объекта body и, если она стала больше этого значения, меняем знак у значения переменной dx . Свойство clientwidth представляет ширину элемента страницы в пикселах, а объект 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 movelmage ( ) {
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="divl" STYLE="top: 50; left: 50; position: absolute;
z-index: 1">J</DIV>
<DIV ID="div2" STYLE="top: 50;
left: 100; position: absolute; 4>z- index: -l">a</DIV>
<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 -обозревателях...
Вот такая анимация...