Поиск

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

Как мы уже видели, слой может содержать несколько различных объектов. Он могут даже включать в себя другие слои. Конечно, может возникнуть вопрос, для чего это нужно. На самом деле есть несколько причин, чтобы пользоваться вложенными слоями. Рассмотрим несколько примеров, демонстрирующих применение вложенных слоев.
В первом примере используется слой (называемый 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) {­
// move 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():

document.layers["parentLayer"].left= 100 + pos0;
...
document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
...
document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

Чтобы получить доступ к вложенным слоям, Вам недостаточно будет просто написать document.layers["layer1"] или document.layers["layer2"], поскольку слои layer1 и layer2 лежат внутри parentLayer.

Посмотрим теперь, как можно задать выделяемую область. В следующем примере используется механизм вырезания и перемещение изображения. Чего этим мы хотим достичь - чтобы вырезаемая часть была зафиксирована, т.е. чтобы при перемещении всего изображения не происходила смена видимого на экране фрагмента.

Исходный код скрипта:

<html>
<head>

<script language="JavaScript">
<!-- hide

var pos= 0; // начальное положение
var direction= false;

function moveNclip() {­

if (pos<-180) direction= true;
if (pos>40) direction= false;

if (direction) pos+= 2
else pos-= 2;

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

}

// -->
</script>

</head>
<body onLoad="setInterval('moveNclip()', 20);">

<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0>
<ilayer name="imgLayer" top=0 left=0>
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>
</ilayer>

</body>
</html>

И снова, можно видеть пример обращения к вложенному слою:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

С остальными элементами этого скрипта Вы уже должны быть знакомы.