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

PI-Popovichenko / ПІ_ПЗС-1244_Поповіченко_Лаб№7

.doc
Скачиваний:
8
Добавлен:
23.02.2016
Размер:
995.33 Кб
Скачать

МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

Черкаський державний технологічний університет

Кафедра програмного забезпечення автоматизованих систем

ЗВІТ

з лабораторної роботи № 7

з дисципліни «Програмування інтернет»

на тему: «Анімація засобами JavaScript»

Перевірив:

Виконав:

асистент кафедри ПЗАС

Металап В.В.

__________________________

студент групи ПЗС-1244

Поповіченко Антон

__________________________

Черкаси 2013

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

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

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

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

Створення малюнків.

Перший етап роботи з анімацією полягає в створенні набору малюнків. Наприклад, давайте створимо стрілу, що рухається по екрану зліва направо. Для анімаційного зображення нам потрібно набір зображень. Щоб одержати його, створіть квадрат розміром 100x100, намалюйте стрілу і створіть на його базі різні "кадри".

Створення базоваго HTML-документа для анімації. Тепер необхідно створити документ HTML, який задає анімаційну картинку. Нехай стріла переміщається в п'яти позиціях сторінки від однієї межі до іншої. Код HTML має вигляд:

<Н1>Анімация у JavaScript</Hl>

<HR>

<CENTER>

<IMG src="strila0.gif" width=100 height=100 alt="" border="0">

<IMG src="strila0.gif" width=100 height=100 alt="" border="0">

<IMG src="strila0.gif" width=100 height=100 alt="" border="0">

<IMG src="strila0.gif" width=100 height=100 alt="" border="0">

<IMG src="strila0.gif" width=100 height=100 alt="" border="0">

</CEHTER>

Завдання

Написати сценарій з анімацією. Індивідуальне завдання згідно номеру варіанту в таблиці. «Хмара пливе по небу»

Лістинг програми

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title></title>

</head>

<body>

<div style="top:0px; left: 0px; width:100%; height: 100%; position:absolute">

<!--Это поверх картинки. Здесь контент страницы.-->

</div>

<img width="100%" height="100%" src="bg.jpg"/>

<img src="point.png" name="myimg" id="myimg" style="position:absolute; top:10; left:20 ">

<script type="text/javascript">

function mentmove(xid,yexpr,xexpr,ztime){

if (!xid) return null

if(!yexpr) yexpr="x"

if(!xexpr) xexpr="x"

if(!ztime) ztime=1000

x=1

setInterval("move('"+xid +"', '"+yexpr+"', '"+xexpr+"')",ztime)

}

function move(xid,yexpr,xexpr){

x++

document.all[xid].style.top=eval(yexpr)

document.all[xid].style.left=eval(xexpr)

}

mentmove("myimg", 530, 0,3)

</script>

</body>

</html>

Результати виконання програми

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