JavaScript для мага


Вложенные слои - часть 2


  }

 

  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.

 

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




Начало  Назад  Вперед



Книжный магазин