Читать «Введение в JavaScript для Мага» онлайн - страница 38
Стефан Кох
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>
