JavaScript для мага

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


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

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

(online-версия руководства позволит Вам проверить этот скрипт немедленно)

После открытия мы видим три кнопки. Эти кнопки могут запускать и останавливать движение слоев. Также можно видеть, что перемещение слоя 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.

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



(online- версия руководства позволит Вам проверить этот скрипт немедленно)

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

<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;

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


Содержание раздела