Всё для Учёбы — студенческий файлообменник
1 монета
pdf

Студенческий документ № 005310 из ИУБиП

Лабораторное занятие № 17

Тема: Создание анимированных веб-страниц

Цель: Рассмотреть принципы создания анимации на веб-страницах

Задание:

1 Рассмотреть пример программы.

2 Переписать предложенный в задании 1 скрипт. Пусть первым будет pic1.gif, как в сегодняшнем примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет быстро. 1600 будет умеренно. 2400 будет медленно. Запускать анимацию должна текстовая ссылка "Показать анимацию".

Необходимые приборы: ПК, текстовый редактор Блокнот, браузер

Методические рекомендации к выполнению лабораторной работы:

Методические рекомендации к выполнению задания 1

Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Это делается через команды new Image() и img.src, стоящие вне функции. Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера.

Рассмотримпример:

var num=1 img1 = new Image (77,76) img1.src = "pic1.gif" img2 = new Image (77,76) img2.src = "pic2.gif" img3 = new Image (77,76) img3.src = "pic3.gif" function startshow()

{ for (i=1; i

Показатьанимацию

Обратите внимание еще раз, что рисунки, как и переменная num, вынесены за рамки функции:

var num=1 img1 = new Image (77,76) img1.src = "pic1.gif" img2 = new Image (77,76) img2.src = "pic2.gif" img3 = new Image (77,76) img3.src = "pic3.gif" Исамафункция:

function startshow() { for (i=1; i

• startshow() содержит кое-что новое, вложенные циклы

(nestedloops). Видите, внутри первого цикла forнаходится второй (слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.

• Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 800 после появления каждой картинки. На это уходят доли секунды.

• Внешний цикл заставляет программу повторяться 21 раз. Видите, это обозначено в функции: for (i=1; i ? И наконец ссылка, которая запускает анимацию:

Display animation

Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.

Методические рекомендации к выполнению задания 2 Примерныйскрипт:

num=1 img1 = new Image () img1.src = "pic1.gif" img2 = new Image () img2.src = "pic2.gif" img3 = new Image () img3.src = "pic3.gif" function startshow(sp) { howfast=1600

if (sp.toUpperCase() == "SLOW")

{howfast=2400}

if(sp.toUpperCase() == "FAST")

{howfast=800} alert(howfast) for (i=1; i

Укажитескоростьанимации: (fast, medium, slow)

Показатьанимацию

Вопросы для самоконтроля:

1 Дайте определение понятию анимация.

2 Каким образом осуществляется создание анимации? Опишите алгоритм действия.

3 Какие команды используются для отображения анимации на вебстранице?

Показать полностью… https://vk.com/doc62771886_249148734
194 Кб, 11 декабря 2013 в 10:53 - Россия, Ростов-на-Дону, ИУБиП, 2013 г., pdf
Рекомендуемые документы в приложении