Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Unix.docx
Скачиваний:
3
Добавлен:
01.03.2025
Размер:
1.91 Mб
Скачать

Создание динамических страниц с помощью слоев (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. Высота строки.

JavaScript позволяет обращаться к слоям следующим образом:

Для Internet Explorer

Для Netscape Navigator

Для Netscape Navigator 6.0

document. all. имяслоя^гук. свойсво_ слоя = значение; * имя_слоя определяется в параметре ID, тэга DIV

document.имя слоя.свойство слоя = значение;

document. getElementById(" имя слоя^^Гук.свойство слоя = значение;

Ниже, в качестве примера, приведена анимация, реализованная при помощи слоев. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Создание анимации с помощью DHTML</TITLE> <META content="text/html; charset=windows-1251" http-equiv="Content-Type"> <SCRIPT LANGUAGE="JavaScript">

/* определение типа браузера. Переменные: ns (Netscape), ns6 (Netscape 6.0), ie (MS Internet Explorer).*/ ns=(document.layers)? 1:0;

ns6=(document.getElementById&&!document.all)?1:0;

var pos1x=0; var pos1y=0; var pos2x=550; var pos2y=0;

var speed1=Math.floor(Math.random()*10)+5; var speed2=Math.floor(Math.random()*10)+5; function next(){

pos1x=pos1x+speed1; pos1y=pos1y+speed1; if (pos1x>550) pos1x=0; if (pos1y>300) pos1y=0;

pos2x=pos2x-speed2; pos2y=pos2y+speed2; if (pos2x<0) pos2x=550; if (pos2y>300) pos2y=0;

if (ns) {

document. ris1.left=poslx; document. ris1.top=pos1y; document.ris2.left=pos2x; document.ris2.top=pos2y; }

if (ie) {

document.all.ris1.style.left=pos1x; document.all.ris1.style.top=pos1y; document.all.ris2.style.left=pos2x; document.all.ris2.style.top=pos2y; }

if (ns6) {

document.getElementById("ris1").style.left=pos1x; document.getElementById("ris1").style.top=pos1y; document.getElementById("ris2").style.left=pos2x; document.getElementById("ris2").style.top=pos2y; }

window.setTimeout("next();", 10); }

</SCRIPT> </HEAD>

<BODY onLoad="next();">

<H1>Создание анимации с помощью DHTML</H1> <HR>

<DIV ID="ris1" STYLE="position:absolute; left:0; top:0; width:200; height:100; visibility:show">

<A HREF="http:\\www.microsoft.com">Просто ссылка</А>

</DIV>

<DIV ID="ris2" STYLE="position:absolute; left:550; top:0; width:200; height:100; visibility:show">

<IMG src="kartinka2.gif" width="100px" height="100px" alt="картинка" border="0">

</DIV>

</BODY>

</HTML>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]