Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Гамоцька / Zvit_2lab

.docx
Скачиваний:
7
Добавлен:
23.02.2016
Размер:
171.42 Кб
Скачать

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ

КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

ЗВІТ

З лабораторної роботи №2

з курсу «Програмне забезпечення мереж передачі даних»

Перевірила: Виконали:

Гамоцька С.Л. студенти групи ПР-102

Путра В.В.

Іршенко О.А.

Дегтяр А.В.

Черкаси, 2013

Тема: Анімація засобами JavaScript

Мета роботи: Навчитися “оживляти” анімаційні малюнки засобами JavaScript, працювати з масивами html-елементів в скриптах.

Теоретичні відомості

Які правила створення малюнків для анімації?

Перший етап роботи з анімацією полягає в створенні набору малюнків.

Наприклад, давайте створимо стрілу, що рухається по екрану зліва направо.

Для анімаційного зображення нам потрібно набір зображень. Щоб

одержати його, створіть квадрат розміром 100x100, намалюйте стрілу і створіть

на його базі різні "кадри".

JavaScript – не найкращий засіб для створення анімації, але ця мова часто використовується тоді, коли необхідно управляти анімацією в сценарії. Створимо функцію next, що переміщає малюнок з однієї позиції в іншу.

Для циклічного виклику цієї функції можна використати метод setTimeout

об‘єкта Window.

На першому етапі у функції next потрібно збільшити індекс малюнка,

який відображається в поточній позиції. Після збільшення значення змінної

cimage необхідно задати умову, що дозволяє визначити восьмий індекс малюнка:

if (cimage>8) {

cimage=4;

document.images[cbox]. src ="strila0.gif";

cbox=(cbox+l)%5;

nbox=(nbox+l)%5;

Якщо поточний індекс cbox менше 8, то його значення збільшується на одиницю і змінній nbox присвоюється нове значення. Обидва вирази

використовують оператор модуля (%), що не дозволяє змінним приймати

значення більше 4. Якщо це відбувається, миша починає "рухатися" наново від лівої межі екрана.

Потім необхідно розрахувати індекс малюнка, що відображається в наступній позиції:

nimage = cimage - 5;

if (nimage <=0) nimage = 0;

У кінці функції задаються оператори виводу на екран малюнків,

визначених змінними nimage і cimage у вказаних позиціях:

document.images[сbох].src="strila"+eimage+".gif";

document.images[nbox].src="strila"+nimage+".gif";

У останньому операторі функції потрібно задати затримку перед наступним викликом функції (0,1 сек).

indow. setTimeout("next();",100);

Результати виконання завдання:

Рис.1.

Рис.2.

index.html

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

$("#right").click(function(){

$(".block").animate({"left": "+=500px"}, "slow");

});

$("#left").click(function(){

$(".block").animate({"left": "-=500px"}, "slow");

});

});

</script>

<style>

div {

position:absolute;

background: url(3.jpg);

left:1px;

width:600px;

height:600px;

margin:1px;

}

</style>

</head>

<body>

<button id="left">«</button> <button id="right">»</button>

<div class="block"></div>

</body>

</html>

Висновки: ми навчилися “оживляти” анімаційні малюнки засобами JavaScript, працювати з масивами html-елементів в скриптах.

Соседние файлы в папке Гамоцька