Примеры скриптов
Анимация
Анимационные эффекты на Web-странице можно создать и средствами HTML совместно со скриптами. Конечно, самым эффективным средством создания анимации для Web является программа Flash. Однако кое-что можно сделать с помощью динамического HTML, т. е. HTML совместно со скриптами и CSS (каскадными таблицами стилей).
Если вам необходимо, чтобы картинка изменяла свой вид, то используйте анимационные GIF-файлы. Если же вы хотите, чтобы картинка перемещалась в пространстве страницы, то используйте соответствующий скрипт. Интересный результат получается при перемещении анимационного GIF-файла с помощью скрипта. Вообще говоря, это – генеральная стратегия создания анимации средствами динамического HTML.
Ниже мы приводим код, который перемещает картинку из файла labelt.gif на некоторое количество пикселов по вертикали и горизонтали, если вы сделали на ней щелчок кнопкой мыши.
<HTML><IMG id="myimage" SRC="openl.gif" STYLE="position:absolute; lop:10; left:50" onClick="move()"><SCRIPT> function move() { document.all("myimage").style.top = parselnt(document.all("myimage").style.top) + 10; document.all("myimage").style.left = parselnt(document.all("myimage").style.left) + 20; } </SCRIPT> </HTML>Здесь функция move() переопределяет координаты картинки. Мы использовали функцию parseInt() для преобразования строковых значений параметров стиля в числовые, чтобы корректно выполнить арифметические операции.
Теперь модифицируем рассмотренный выше пример так, чтобы картинка при щелчке кнопкой мыши на ней начинала двигаться без остановки. Для этого нам потребуется метод setInterval(). Напомним, что это – метод объекта window. Он принимает два параметра: функцию, которую следует периодически запускать и период в милисекундах, через который ее нужно запускать. В примере мы намерены запускать функцию move() через 0.1 с. Вот код данного примера:
<HTML><IMG id="myimage" SRC="openl.gif" STYLE="position:absolute; top:iO; left:50" onClick="move()"><SCRIPT> function move() { document.all("rayimage").style.top = parselnt(document.all("myimage").style.top) + 10; document.all("myimage").style.left = parselnt(document.all("myimage").style.left) + 20; setlnterval("move ()", 100); // периодический вызов функции move() } </SCRIPT> </HTML>Ниже приведен аналогичный пример, но отличающийся от рассмотренного выше тем, что картинка начинает перемешаться сразу после загрузки HTML-документа, не дожидаясь щелчка.
<HTML><IMG id="myimage" SRC="openl.gif" STYLE="position:absolute; top:10; left:50"><SCRIPT> function move() { document.all("myimage").style.top = parselnt(docurrent.all("myimage").style.top) + 10; document.all("myimage").style.left = parselnt(document.all("myimage").style.left) + 20; } setlnterval("move()", 100); // периодический вызов функции move() </SCRIPT> </HTML>В этом примере метод setlnterval () находится вне определения функции move (), поэтому он начнет выполняться сразу же после загрузки страницы в браузер.
Очевидно, в рассмотренных выше примерах картинка, начав движение, со временем исчезнет из поля зрения (уйдет за границы окна браузера). Чтобы это не произошло, следует использовать замкнутые траектории движения, которые мы рассмотрим в следующем примере.
В рассматриваемом ниже примере картинка перемещается по эллиптической траектории. Вместо картинки вы можете заставить двигаться любой другой видимый элемент страницы. Эллипс – это замкнутая кривая, овал. Частными случаями эллипса являются окружность и отрезок прямой линии. Особенность данного примера состоит в том, что функция, обеспечивающая движение элемента по эллипсу, универсальна, т. е. не зависит от того, что именно должно двигаться по эллиптической траектории. Кроме того, мы разместили описание этой функции в отдельном текстовом файле с расширением js. Предполагается, что текстовые файлы с таким расширением содержат скрипты, написанные на языке JavaScript. В нашем примере этот файл имеет имя ellipse.js. Поскольку этот скрипт достаточно универсален, вы можете использовать его в своих разработках.