Этот сайт - часть системы сайтов для начинающих веб-мастеров
|
В прошлой
главе говорилось об анимации. Давайте же рассмотрим 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-обозревателях...
Вот такая
анимация...