Более сложный 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-обозревателях...

Вот такая анимация...

На правах рекламы: v=|| +// пуховики женские интернет+<

::  Меню ::

Введение

ЧАСТЬ I. КАК СДЕЛАТЬ ПРОСТЕЙШИЙ WEB-САЙТ
Глава 1. Как создаются Web-страницы
Глава 2. Основные принципы работы с Dreamweaver
Глава 3. Начинаем с текста
Глава 4. Рисунки, звуки, фильмы
Глава 5. Таблицы
Глава 6. Работа с Web-сайтом

ЧАСТЬ II. ЗАНИМАЕМСЯ ПРОФЕССИОНАЛЬНЫМ WEB-ДИЗАЙНОМ
Глава 7. Фреймы
Глава 8. Табличный дизайн
Глава 9. Использование шаблонов
Глава 10. Каскадные таблицы стилей
ЧАСТЬ III. ИСПОЛЬЗУЕМ НОВЕЙШИЕ ТЕХНОЛОГИИ
Глава 11. Свободно позиционируемые элементы
Глава 12. Анимация элементов Web-страниц
Глава 13. Использование сценариев
Глава 14. Метатеги и серверные директивы
ЧАСТЬ IV. ПИШЕМ СЕРВЕРНЫЕ ПРОГРАММЫ
Глава 15. Введение в серверное программирование
Глава 16. Формы
Глава 17. Простейшие серверные приложения
Глава 18. Создание интерактивных сайтов
Заключение
‹аминат в ванной комнате: описание и характеристики материала Ѓлагоустройство садовой территории Љому можно продать аварийное авто? Џреимущества покупки авиабилетов на Tickets.by
Џреимущества автоломбардов
На что обратить внимание, сдавая часы в ломбард
Ѓлагоустройство садовой территории


:: Реклама ::

  Как создаются Web-страницы?
 


:: Статистика ::


Індекс цитування
Яндекс.Метрика

:: Навигация ::

Главная
Гостевая книга
Добавить в избраное  

 

 

 


Copyright © Asentli, 2008-2010