После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Анимация
Концепция
Здесь с помощью JavaScript создается анимационная картинка. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Помните, как это делается? С помощью команд new Image() и img.src, стоящих вне функции.
Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера. Какая же это будет анимация!
Сценарий
<HTML> <HEAD> <SCRIPT type="text/javascript"> var num=1 img1 = new Image (150,150) img1.src = "pic1.gif" img2 = new Image (150,150) img2.src = "pic2.gif" img3 = new Image (150,150) img3.src = "pic3.gif" function startshow() { for (i=0; i<21; i=i+1) {document.mypic.src=eval("img"+num+".src") for(x=1; x<8000; x=x+1) {} num=num+1 if(num==4) {num=1} } document.mypic.src=img1.src } </SCRIPT> </HEAD> <BODY> <CENTER> <IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt=""> <p> <A HREF="JavaScript:startshow()"> Показать анимацию</a> </CENTER> </BODY> </HTML>
Результат работы сценария
На странице выводится изображение pic1.gif и текстовая ссылка " Показать анимацию", при нажатии на которую начинается последовательная смена изображений (анимация).
(Сценарий может не работать в браузере MSIE.)
Разбор сценария
Мы начинаем с предварительной загрузки изображений. Обратите внимание, что это происходит вне функции, так же, как и задание переменной num. Это выглядит следующим образом:
<SCRIPT type="text/javascript"> var num=1 img1 = new Image (150,150) img1.src = "pic1.gif" img2 = new Image (150,150) img2.src = "pic2.gif" img3 = new Image (150,150) img3.src = "pic3.gif"
function startshow() { for (i=0; i<21; i=i+1) {document.mypic.src=eval("img"+num+".src") for(x=1; x<8000; x=x+1) {} num=num+1 if(num==4) {num=1} } document.mypic.src=img1.src } </SCRIPT>
startshow() содержит новый элемент, вложенные циклы! Видите, внутри первого цикла for находится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.
Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 8000 после появления каждой картинки. На это уходят доли секунды.
Внешний цикл заставляет программу повторяться в цикле 21 раз. Видите это в функции: в первом операторе цикла for (i=0; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.
Когда цикл закончится, картинка снова вернется к pic1.gif.
Вот команда, которая помещает первое изображение на страницу:
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 alt="">
Обратите внимание, что имя задано как "mypic". Если посмотреть на иерархию операторов в сценарии, то оно находится между document и src.
И наконец ссылка, которая запускает анимацию:
<A HREF="JavaScript:startshow()">Показать анимацию</a>
Снова команда HREF указывает на JavaScript:функция(), чтобы все глобальные переменные были доступны.