Гамоцька / Zvit_2lab
.docxМІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ЗВІТ
З лабораторної роботи №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-елементів в скриптах.