АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция

Создание анимации с помощью массивов

Читайте также:
  1. Cоздание массивов постоянной длины
  2. III. Решение логических задач с помощью рассуждений
  3. Автоматизированное рабочее место (АРМ) специалиста. Повышение эффективности деятельности специалистов с помощью АРМов
  4. Анализ и синтез систем управления с помощью математических теорий
  5. АРГОНАВТЫ ОБРАЩАЮТСЯ ЗА ПОМОЩЬЮ К МЕДЕЕ
  6. Большой помощью украинскому народу была продажа хлеба через пограничные города, т.к. 1648 год на Украине был неурожайным.
  7. В будущее с помощью чисел
  8. В отделении реанимации на экране кардиографа у пациента определялась картина полной предсердно-желудочковой блокады (нарушения проведения импульса в проводящей системе сердца).
  9. Власть примера. Влияние с помощью харизмы
  10. Внешняя политика в царствование Александра III, создание франко-русского союза
  11. Вопрос 20. Создание специальных образовательных учреждений в дореволюционной России
  12. Вытяжка с помощью полиуретана

Простейшая анимация реализуется путем создания анимированного gif рисунка в графических редакторах.

Однако анимацию можно выполнить и при помощи JavaScript.

исунок, внедренный в HTML - страницу, представляют собой объект image, дочерний по отношению к объекту document. Каждый объект image имеет следующие свойства:

• border. Соответствует атрибуту BORDER дескриптора <IMG>. Определяет границы рисунка.

• complete.Определяет степень загруженности рисунка. Принимает булевы значения (true или false).

• heigth и width. Задают размеры рисунка. Свойства только для чтения. Изменить их при создании динамических рисунков нельзя.

• hspace и vspace. Определяют место расположения рисунка на странице. Только для чтения.

• name. Имя рисунка. Оно определяется атрибутом NAME при определении рисунка.

• lowscr. Принимает значение атрибута LOWSCR. Это специальный атрибут, используемый броузером, который определяет загрузку рисунка в низком разрешении перед загрузкой основного изображения.

• srс. Источник рисунка, определяемый адресом URL. Это свойство может изменяться.

При создания анимации, исходный рисунок на странице подменяется рисунками из массива. Пример:

<HTML> <HEAD> Пример анимации </HEAD>

<BODY>

<IMG border="0" src="1.jpg" alt="анимация">

<SCRIPT LANGUAGE="JavaScript">

var ind=1; massiv=new Array(3);

image1=new Image(); image1.src="1.jpg";

image2=new Image(); image2.src="2.jpg";

image3=new Image(); image3.src="3.jpg";

massiv[1]=image1; massiv[2]=image2; massiv[3]=image3;

function ScrollPicture(){

document.images[0].src=massiv[ind].src;

ind=ind+1; if (ind>3) {ind=1}

window.setTimeout("ScrollPicture()",500);

ScrollPicture();

</SCRIPT>

</BODY>

</HTML>

 

Создание динамических страниц с помощью слоев (DHTML)

Содержание документа HTML может находится на различных слоях (подробнее см. лекцию по HTML, раздел слои DHTML и стили CSS). Слои могут быть наложены друг на друга в определенном порядке и перекрываться. С помощью JavaScript их также можно перемещать, скрывать и отображать. Каждый слой имеет свои уникальные свойства, например цвет или рисунок фона.

Определить слой можно несколькими способами, но самый популярный из них заключается в использовании дескриптора <DIV>, который впервые стали использовать в HTML 3.0. Чтобы создать слой с помощью дескриптора <DIV>, заключите содержимое слоя в пару дескрипторов <DIV> и определите свойства после атрибута STYLE. Пример:

<DIV ID="nazvanie1" STYLE="position:absolute; left:100; top=100">

Это содержимое слоя

</DIV>

Этот код определяет слой nazvanie1. Это перемещаемый слой, смешенный относительно левого верхнего угла окна браузера на 100 по вертикали и 100 пикселей по горизонтали.

В атрибуте STYLE дескриптора <DIV> можно указывать самые различные свойства слоев. Доступ к этим свойствам возможен и из программ на JavaScript. Некоторые свойства слоя приведены ниже:

• position. Определяет расположение слоя в окне. Принимает три значения: static (неперемещаемый слой), absolute (координаты слоя – абсолютные, в пикселях относительно окна браузера), relative (координаты слоя – относительные, относительно его нормального расположения).

• left и top. Определяют координаты слоя: сдвиг слева и сверху. Для значения absolute отсчет ведется относительно окна браузера, а для relative — относительно нормального расположения слоя.

• width и height. Ширина и высота слоя.

• clip. Определяет границу на слое. Отображается только та часть слоя, которая расположена внутри границы.

• overflow. Режим усечение границей слоя. Принимает значения none (нет усечения), clip (есть усечение) и scroll (если слой не помещается в границу, то используются полосы прокрутки).

• zIndex. Определяет порядок наслоения слоев. Самый нижний слой имеет значение этого индекса 1. Слой, расположенный над ним, имеет индекс 2 и т.д.

• visibility. Определяет видимость слоя. Принимает значения visible (слой отображается), hidden (слой невидим) и inherit (если два слоя вложены друг в друга, то если отображается основной слой, то отображается и вложенный).

• backgroundColor. Цвет фона слоя.

• color. Цвет шрифта. Например "red".

• fontSize. Размер шрифта в пикселях.

• fontFamily. Название шрифта, например "Times".

• fontStyle. Тип шрифта (жирный, наклонный). Например "Italic".

• textAlign. Выравнивание текста. Возможны варианты "Left", "Right", "Center".

• letterSpacing. Расстояние между символами. Например 3.

• lineHeight. Высота строки.

 

Контрольные вопросы:

1. Какие математические функции можно использовать в JavaScript?

2. Какие функции даты и времени можно использовать?

3. Перечислите функции при работе со строками?

4. Что такое объект event?

5. Назовите свойства объекта event?

6. Как в JavaScript создаются пользовательские объекты?

7. Как в JavaScript можно настроить встроенные объекты Web-браузера?

8. Что необходимо сделать, чтобы создать гиперссылку в виде рисунка, меняющегося при наведении на него указателя мыши?

 

Домашнее задание:

[7], с. 37-49


1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |

Поиск по сайту:

Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.004 сек.)