Иллюстрированный самоучитель по 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-обозревателях…

Забиваем Сайты В ТОП КУВАЛДОЙ - Уникальные возможности от SeoHammer

Каждая ссылка анализируется по трем пакетам оценки: SEO, Трафик и SMM. SeoHammer делает продвижение сайта прозрачным и простым занятием. Ссылки, вечные ссылки, статьи, упоминания, пресс-релизы - используйте по максимуму потенциал SeoHammer для продвижения вашего сайта.

Что умеет делать SeoHammer

— Продвижение в один клик, интеллектуальный подбор запросов, покупка самых лучших ссылок с высокой степенью качества у лучших бирж ссылок.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.

SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.

Зарегистрироваться и Начать продвижение

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