Анимация и JavaScript

Когда мы рассматривали создание фотоальбома с использованием JavaScript мы меняли изображение нажатием на соответствующую клавишу. Но JavaScript позволяет менять картинки автоматически с заданной частотой. Получается некое подобие анимации.

Мы рассмотрим два варианта:

Непрерывная смена картинок
Смена картинок при наведении курсора мыши

Итак, сначала объявляем массив изображений для шести картинок:

img_a=new Array()         
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[3]=new Image()
img_a[4]=new Image()
img_a[5]=new Image()

Теперь этот массив надо заполнить. Присвоим каждому его элементу имя файла с изображением.

img_a[0].src="PreView/11.jpg"
img_a[1].src="PreView/12.jpg"
img_a[2].src="PreView/13.jpg"
img_a[3].src="PreView/21.jpg"
img_a[4].src="PreView/22.jpg"
img_a[5].src="PreView/23.jpg"

Ну и естественно нам никак не обойтись без функции. Описываем функцию последовательной смены фотографий:

function img_b()          
{
document.images[1].src=img_a[i].src
i++
if(i>5) i=0; 
setTimeout("img_b()", 1000) 
}

Функция непрерывно увеличивает значение переменно i на единицу. Затем выполняется проверка, чтобы значение переменной не превысило количества наших картинок. Для задания интервала мелькания кадров используется функция setTimeout. Частота мелькания выставляется в миллисекундах. В нашем случае она равна одной секунде.

Ну и остается описать тело самого нашего HTML-документа, в котором будет меняться картинка. Выведем на экран три фотографии. Первая и третья будут оставаться неизменными. Меняться изображения будут во второй картинке. Я выбрал такой вариант, чтоб вам было понятно, как работать именно с той картинкой, которая вам необходима. Ранее я уже говорил, что каждое изображение на web-странице имеет порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы обращаемся, записав document.images[0], ко второму: document.images[1], и к третьему: document.images[2]. Поэтому в описании нашей функции мы записали document.images[1].src=img_a[i].src. Что означает что элементы массива изображений будут выводиться во втором объекте имидж HTML-документа. Вызов функции будет помещен в теге <body>. Весь код страницы будет выглядеть следующим образом:

<html>
<head>
<title>Анимация и JavaScript</title>

<!-- Данный скрипт надо поместить в заголовке документа -->
<script language="JavaScript">
<!--
i=0;
img_a=new Array();   // Объявляется массив
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
img_a[3]=new Image();
img_a[4]=new Image();
img_a[5]=new Image();

img_a[0].src="PreView/11.jpg"; // Каждому элементу  
img_a[1].src="PreView/12.jpg"; // массива присваивается 
img_a[2].src="PreView/13.jpg"; // конкретная картинка 
img_a[3].src="PreView/21.jpg";
img_a[4].src="PreView/22.jpg";
img_a[5].src="PreView/23.jpg";

function img_b()     // описывается функция последовательного 
                     // вывода картинок
{
document.images[1].src=img_a[i].src;

i++;
if(i>5) i=0;
setTimeout("img_b()", 1000); // Тут задается в миллисекундах 
                             // частота мелькания кадров. 
                             // В данном случае кадры 
                             // меняются каждую секунду
}
//-->
</SCRIPT>
<!-- Скрипт закончен -->

</head>

<!-- В теге <body> помещаем вызов нашей функции -->

<body bgcolor="#ffffff" onLoad=img_b()>

<img src="PreView/12.jpg">

<!-- А вот тут и будут листаться наши картинки -->
<img src="PreView/11.jpg">

<img src="PreView/13.jpg">

</body>

</html>

Ну и, конечно же, хочется посмотреть, как это работает. Только учтите, что картинки начнут меняться, только после того, как загрузятся все элементы массива. Поэтому для анимации нужно подбирать небольшие по объему изображения.

Теперь я вам обещал, что картинки будут меняться при наведении курсора на изображение. Для этого используем два обработчика событий: По попаданию курсора мыши - onMouseOver. А по выходу мыши событие - onMouseOut Ссылка будет выглядеть так:

<a href="../index.html" onMouseOver="img_start()" 
                        onMouseOut="img_stop()">
...
</a../

В теле функции вывода картинок мы вставим проверку на значение переменной svich. Если это значение "истина" то картинки будут листаться, а если это значение "ложь", то картинки остановятся. Эта проверка выглядит вот так:

if(svich==true)
{
......... // тут выполняемые операторы
}

Ну и сами функции вызываемые по реакции мыши:

функция "img_start()" присваивает переменной svich значение true и вызывает функцию листания картинок list_img()
функция "img_stop()" присваивает переменной svich значение false, тем самым, останавливая листание картинок.

Код данной странички будет выглядеть следующим образом:

<html>
<head>
<title>Смена картинок</title>

<!-- Данный скрипт надо поместить в заголовке документа -->
<script language="JavaScript">
<!--
var i=0;
var svich=true;    // переменная, которая будет разрешать 
                   // смену картинок

img_a=new Array();   // Объявляется массив
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
img_a[3]=new Image();
img_a[4]=new Image();
img_a[5]=new Image();

img_a[0].src="PreView/11.jpg"; // Каждому элементу  
img_a[1].src="PreView/12.jpg"; // массива присваивается 
img_a[2].src="PreView/13.jpg"; // конкретная картинка 
img_a[3].src="PreView/21.jpg";
img_a[4].src="PreView/22.jpg";
img_a[5].src="PreView/23.jpg";


function list_img()   // описывается функция последовательного 
                      // вывода картинок
{
if(svich==true)       // проверяется можно ли менять картинки
{
document.images[0].src=img_a[i].src ;
i++ ;
if(i>5) i=0 ;
setTimeout("list_img()", 100); // Тут задается в миллисекундах 
                               // частота мелькания кадров.
                               // В данном случае кадры меняются 
                               // с частотой 5 раз в секунду
}                           
}

function img_start()   
{
svich=true; // разрешаем менять картинки
list_img()  // вызываем функцию вывода картинок
}

function img_stop()
{
svich=false;  // запрещаем менять картинки
}


//-->
</SCRIPT>
<!-- Скрипт закончен -->

</head>

<!-- В теге <body> помещаем вызов нашей функции -->

<body bgcolor="#ffffff" >

<a href="../index.html" onMouseOver="img_start()" 
                        onMouseOut="img_stop()">
<img src="PreView/11.jpg"></a>

</body>

</html>

Шаг 19 - Анимация и JavaScript