Введение в JavaScript для Мага

ОглавлениеДобавить в закладки К обложке

Заметим, что размер изображения мы получаем в самом начале функции start():

var width= document.layers["imgLayer"].document.davinci.width;

var height= document.layers["imgLayer"].document.davinci.height;

С помощью конструкции document.layers["imgLayer"] мы можем обратиться к слою с именем imgLayer. Однако почему после document.layers["imgLayer"] мы ставим document? Дело в том, что каждый слой имеет свою собственную HTML-страницу — то есть, каждый слой имеет свой объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

Вложенные слои

Как мы уже видели, слой может содержать несколько различных объектов. Он могут даже включать в себя другие слои. Конечно, может возникнуть вопрос, для чего это нужно. На самом деле есть несколько причин, чтобы пользоваться вложенными слоями. Рассмотрим несколько примеров, демонстрирующих применение вложенных слоев.

В первом примере используется слой (называемый parentLayer), в который вложено еще два других слоя (layer1 и layer2).

После открытия страницы мы видим три кнопки. Эти кнопки могут запускать и останавливать движение слоев. Также можно видеть, что перемещение слоя parentLayer сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев.

Рассмотрим теперь исходный код скрипта:

<html>

<head>

<script language="JavaScript">

<!- hide

// начальна\я позици\я

var pos0= 0;

var pos1= -10;

var pos2= -10;

// движение?

var move0= true;

var move1= false;

var move2= false;

// направление?

var dir0= false;

var dir1= false;

var dir2= true;

function startStop(which) {

if (which == 0) move0=!move0;

if (which == 1) move1=!move1;

if (which == 2) move2=!move2;

}

function move() {

if (move0) {

// перемещение parentLayer

if (dir0) pos0-

else pos0++;

if (pos0 < -100) dir0= false;

if (pos0 > 100) dir0= true;

document.layers["parentLayer"].left= 100 + pos0;

}

if (move1) {

// перемещение parentLayer

if (dir1) pos1-

else pos1++;

if (pos1 < -20) dir1= false;

if (pos1 > 20) dir1= true;

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;

}

if (move2) {

// перемещение parentLayer

if (dir2) pos2-

else pos2++;

if (pos2 < -20) dir2= false;

if (pos2 > 20) dir2= true;

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

}

}

// — >

</script>

</head>

<body onLoad="setInterval('move(), 20)">

<ilayer name=parentLayer left=100 top=0>

<layer name=layer1 z-index=10 left=0 top=-10>

Это первый слой

</layer>

<layer name=layer2 z-index=20 left=200 top=-10>

Это второй слой

</layer>

<br><br>

Это главный (родительский) слой

</ilayer>

<form>

<input type="button" value="Move/Stop parentLayer" onClick="startStop(0);">

<input type="button" value="Move/Stop layer1" onClick="startStop(1);">

<input type="button" value="Move/Stop layer2" onClick="startStop(2);">

</form>

</body>

</html>

Можно видеть, что внутри parentLayer мы определили два слоя. Это как раз и есть вложенные слои. Как получить к этим слоям доступ в языке JavaScript? Как это делается, можно посмотреть в функции move():


-= 31 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня