Более сложный 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, фактически не нужен.