ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE)
(1 оценок, среднее: 5,00 из 5)
Загрузка...
Вы можете использовать JavaScript для создания сложной анимации, но не ограничиваясь, следующие элементы:
Вам может быть интересна существующая анимационная библиотека на основе JavaScript: Script.Aculo.us.
В этой статье представлено базовое представление о том, как использовать JavaScript для создания анимации.
JavaScript может использоваться для перемещения нескольких элементов DOM (<img />, <div> или любого другого элемента HTML) на страницах в соответствии с каким-либо шаблоном, определяемым логическим уравнением или функцией.
JavaScript предоставляет следующие две функции, которые часто используются в анимационных программах.
JavaScript также может устанавливать несколько атрибутов объекта DOM, включая его положение на экране. Вы можете установить атрибут top и left объекта, чтобы поместить его в любом месте на экране. Вот его синтаксис.
// Установите расстояние от левого края экрана. object.style.left = distance in pixels or points; или // Заданном расстоянии от верхнего края экрана. object.style.top = distance in pixels or points;
Итак, давайте реализуем одну простую анимацию с использованием свойств объекта DOM и функций JavaScript следующим образом. Следующий список содержит различные методы DOM.
Попробуйте следующий пример.
<html>
<head>
<title>Анимация в JavaScript</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Нажмите кнопку ниже, чтобы переместить изображение вправо</p>
<input type="button" value="Нажми меня" onclick="moveRight();" />
</form>
</body>
</html>В приведенном выше примере мы увидели, как изображение перемещается вправо с каждым щелчком. Мы можем автоматизировать этот процесс, используя функцию setTimeout() в JavaScript следующим образом:
Здесь мы добавили больше методов. Итак, давайте посмотрим, что здесь нового:
Попробуйте следующий пример кода.
<html>
<head>
<title>Анимация в JavaScript</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // вызов moveRight в 20msec
}
function stop(){
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Нажмите кнопки ниже, чтобы обработать анимацию</p>
<input type="button" value="Начало" onclick="moveRight();" />
<input type="button" value="Конец" onclick="stop();" />
</form>
</body>
</html>
Вот простой пример, показывающий опрокидывание изображения с событием мыши.
Давайте посмотрим, что мы используем в следующем примере:
<html>
<head>
<title>Ролловер с событиями мыши</title>
<script type="text/javascript">
<!--
if(document.images){
var image1 = new Image(); // Предварительная загрузка изображения
image1.src = "/images/html.gif";
var image2 = new Image(); // Предварительная загрузка второго изображения
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Наведите курсор на изображение, чтобы увидеть результат</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;" onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>
