Непрофессиональное введение в JAVASCRIPT



         

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


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

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




Содержание  Назад  Вперед