Иллюстрированный самоучитель по Adobe Dreamweaver MX › Использование сценариев › Более сложный Web-сценарий [страница - 307] | Самоучители по работе в Internet

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

Функцию-обработчик мы привязываем к "тику" таймера в функции 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 приведен ниже. Подробно описываться он не будет – попробуйте разобраться с этим кодом сами, на досуге.

<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; 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>

Правда, исправленный вариант страницы перестанет работать в других Web-обозревателях…

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