АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Более сложный Web-сценарий

Читайте также:
  1. IX Фестиваль активного семейного отдыха «Зимние забавы в Угличе»: на фестивальной площадке раскинут русскую шаль площадью более 50 квадратных метров.
  2. Анализ фондоотдачи и резервов выпуска продукции за счет более эффективного использования основных средств
  3. Б) На этом общемировом фоне цифровыми значками показаны конкретные районы наиболее активного современного развития деградационных процессов.
  4. Более 100 млн. детей не ходит в школу
  5. БОЛЕЕ ВЫСОКИЙ ПУТЬ МОЛИТВЫ
  6. Более древние английские словари
  7. Более подробнее о Вихрях, Вы можете прочитать на сайте
  8. Более подробно
  9. Более слабые дро
  10. Более сложная анимация
  11. Более того, если ты уже был членом творческого Союза-Клуба, творить более ты уже был не обязан, ты уже мог просто наслаждаться жизнью, что большинство и делало.

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

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


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.006 сек.)