КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Листинг 5.2. Файл chapter5/noise/noise. html
|
|
|
|
<HTML>
<HEAD>
<TITLE>Animation with JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=1;
var bForward=true;
function showNextImage()
{
if(bForward)
{
if(i > 17)
{
bForward=false;
}
}
else
{
i--;
if(i < 2)
{
bForward=true;
}
}
document.Img.src= "img0" + i + ".gif";
setTimeout("showNextImage()", 100);
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<IMG SRC="img01.gif" NAME="Img">
<SCRIPT LANGUAGE="JavaScript">
<!--
showNextImage();
//-->
</SCRIPT>
</BODY>
</HTML>
У тілі документа за допомогою оператора <IMG> розміщений перший кадр анімаційної послідовності:
<IMG SRC="img01. gif" NAME="Img">
За допомогою параметра NAME задане ім'я Img. Це ім'я буде використано сценарієм JavaScript для посилання на об'єкт.
Крім того, у тілі нашого документа знаходиться виклик функції showNextImage. Дана функція призначена для відображення чергового кадру анімаційної послідовності.
У області заголовка документа HTML знаходиться визначення функції showNextImage і двох глобальних перемінних:
var i=1;
var bForward=true;
Перемінна i береже номер поточного кадру, відображуваного у вікні браузера. Цей номер спочатку збільшується функцією showNextImage від 1 до 16, а потім знову зменшується до 1. Зміна номера відбувається на одиницю (у ту або іншу сторону) при кожному виклику функції showNextImage.
У перемінної bForward зберігається напрямок зміни номера кадру Значення true відповідає прямому напрямку, а значення false - оберненому.
Коли функція showNextImage одержує керування, вона аналізує вміст перемінної bForward. Якщо в цей перемінної знаходиться значення true, функція showNextImage збільшує значення перемінної i а потім порівнює результат із числом 17. Коли відображення всіх кадров у прямої послідовності завершено, у перемінну bForward записується false, після чого при такому виклику функції showNextImage номер поточного кадру буде не збільшуватися, а зменшуватися.
Для відображення чергового кадру функція showNextImage змінює значення властивості src зображення document. Img, як це показано нижче:
document. Img. src= "img0" + i + ". gif";
Ім'я файла, у якому зберігається зображення кадру, конструируется з рядка "img0", номера кадру і рядки ". gif".
Останнє, що робить функція showNextImage перед тим, як повернути керування, - викликає функцію setTimeout:
setTimeout("showNextImage()", 100);
Функція setTimeout установлює таймер. Затримка спрацьовування таймера визначається другим параметром і в нашому випадку дорівнює 100 мс.
Коли таймер спрацює, буде запущена на виконання рядок сценарію JavaScript, що була передана функції setTimeout у якості першого параметра. Після закінчення затримки визивається функція showNextImage і в такий спосіб забезпечується виклик цієї функції в безкінечному циклі.
5.2.3. Чекання завантаження всіх зображень
Якщо необхідно розмістити в документі HTML анімаційне зображення, що складається з окремих кадров, що, у свою чергу, розташовані в окремих файлах, виникає одна проблема. Вона пов'язана з непередбачуваністю часу завантаження всіх зображень анімаційної послідовності через повільний і нестабильный канал Internet.
Щоб анімаційне зображення було показано без перекручуванні, необхідно спочатку дочекатися завершення процесу завантаження файлів окремих кадров і лише потім запускати анимацию.
У листинге 5.3 приведений вихідний текст документа HTML із сценарієм, що працює подібною уявою.
|
|
|
|
|
Дата добавления: 2014-11-29; Просмотров: 330; Нарушение авторских прав?; Мы поможем в написании вашей работы!