КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Создание анимации с помощью массивов
|
|
|
|
Отображение бегущих строк
Используя функции работы со строками и объект Math, а также метод SetTimeout объекта Window можно создать бегущие строки. Пример приведен ниже:
<HTML> <HEAD>
<SCRIPT LANGUAGE="JavaScript">
var msg="Это пример бегущей строки. Впечетляет?";
spacer="......";
pos=0;
function ScrollMessage(){
window.status=msg.substring(pos, msg.length) + spacer + msg.substring(0,pos);
pos++;
if (pos > msg.length) pos=0;
window.setTimeout("ScrollMessage()",100);}
ScrollMessage();
</SCRIPT> </HEAD>
<BODY> <H1> Пример бегущей строки</H1> </BODY>
</HTML>
Создание гиперссылки в виде рисунка, меняющегося при наведении на него указателя мыши
Для создания такого рисунка достаточно поместить его внутрь тэга гиперссылки, и написать в тэге <IMG>, задающем рисунок, обработчики событий onmouseover и onmouseout, подменяющие и восстанавливающие рисунок. Пример:
<HTML> <BODY>
<A HREF="http://microsoft.com">
<IMG src="image1.jpg" name="ris1" width="100px" height="100px" alt="ссылка " border="0"
onmouseover="ris1.src ='image2.jpg';"onmouseout="ris1.src = 'file1.gif';"> </A>
</BODY> </HTML>
Простейшая анимация реализуется путем создания анимированного 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
|
|
|
|
|
Дата добавления: 2014-12-23; Просмотров: 485; Нарушение авторских прав?; Мы поможем в написании вашей работы!