Вложенные слои
Мы уже видели, что слой может содержать несколько различных объектов и даже другие слои. Вы задаться вопросом - какое это имеет применение. Существует несколько причин для использования вложенных слоев. Мы рассмотрим несколько примеров, которые показывают использование вложенных слоев.
Первый пример использует слой, (с именем parentLayer) который содержит два других слоя (layer1 b layer2).
This is the first layer This is the second layer
This is the parent layer
Вы можете видеть три кнопки. Кнопки, которые запускают и останавливают движение слоев. Вы можете видеть, что перемещение слоя parentLayer
также воздействует на другие два слоя. Но перемещение слоя layer1 (или layer2) воздействует только на этот слой. Это показывает, что Вы можете определять группы объектов через вложенные слои.
Теперь давайте посмотрим на исходный текст:
<html> <head>
<script language="JavaScript"> <!-- hide
// starting position var pos0= 0; var pos1= -10; var pos2= -10;
// moving? var move0= true; var move1= false; var move2= false;
// direction? 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) { // move 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) { // move 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> This is the first layer </layer>
<layer name=layer2 z-index=20 left=200 top=-10> This is the second layer </layer>
<br><br> This is the parent layer
</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; // starting position 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;
Вы должны познакомится со всеми другими элементами в этом сценарии.
