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

Мы уже видели, что слой может содержать несколько различных объектов и даже другие слои. Вы задаться вопросом – какое это имеет применение. Существует несколько причин для использования вложенных слоев. Мы рассмотрим несколько примеров, которые показывают использование вложенных слоев.

Первый пример использует слой, 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;

Вы должны познакомится со всеми другими элементами в этом сценарии.

Wiki-учебник по веб-технологиям: JavaScript/ВложенныеСлои ...

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