Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
Разное
В этом уроке мы сделаем простую анимацию в JavaScript. Наша цель будет сделать движение блока слева на право, сверху вниз.
Чтобы заставить блок двигаться, нам понадобится css свойство position: absolute. После его установки, блок не будет привязан к документу, а его положение на сайте можно будет регулировать свойствами left и top.
Еще мы воспользуемся таймерами, которые будут каждые 100 миллесекунд перемещать блок. О тамерах можете почитать у уроке работа с таймерами на javascript.
Для начала напишем html-код div-блока, который будет двигаться, а потом небольшое пояснение:
<html>
<head>
<title>Анимация JavaScript | Дизайн студия OX2</title>
<style type="text/css">
#block {
position: absolute;
background-color: red;
width: 100px;
height: 80px;
color: white;
}
</style>
</head>
<body>
<div id="block">Наш блок</div>
<script type="text/javascript">
var obj = document.getElementById("block");
var i = 0;
/**
* Функция moveBlock будет запускаться каждые 10 миллсекунд
* @author ox2.ru дизайн студия
**/
function moveBlock() {
obj.style.left = i;
obj.style.top = i;
i++;
}
//Каждые 5000 миллисекунд запускаем функцию test (5 секунд, 5000 миллисекунд)
setInterval(moveBlock, 10);
</script>
</body>
</html>
Комментарии
Заполните все поля
Написать комментарий