PI-Popovichenko / ПІ_ПЗС-1244_Поповіченко_Лаб№7
.docМІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ
Черкаський державний технологічний університет
Кафедра програмного забезпечення автоматизованих систем
ЗВІТ
з лабораторної роботи № 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-елементів в скриптах.