Стефан Кох - Введение в JavaScript для Мага

После открытия страницы мы видим три кнопки. Эти кнопки могут запускать и останавливать движение слоев. Также можно видеть, что перемещение слоя parentLayer сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2 ) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев.

Рассмотрим теперь исходный код скрипта:

// начальна\я позици\я

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) {

// перемещение 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;

}

}

// — >

Это первый слой

Это второй слой

Это главный (родительский) слой

Можно видеть, что внутри 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 .

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

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

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;

}

// — >

И снова, можно видеть пример обращения к вложенному слою:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

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

Различные эффекты с вложенными слоями

Интересные эффекты могут быть созданы с помощью (частично) прозрачных слоев. Сочетание специально подобранных изображений с прозрачными областями может создавать совершенно потрясающий результат. Не все форматы изображений поддерживают работу с прозрачными частями. В настоящее время лучший из отвечающих этому условию форматов — gif89a. Большинство новых графических программ поддерживает этот формат. Помимо этого, в Internet доступны некоторые свободно распространяемые инструменты для работы с графикой.

Новый формат изображений PNG также поддерживает эффект прозрачных частей изображения. Я полагаю, что в ближайшем будущем мы увидим множество страниц, использующих этот формат (точнее, как только большинство браузеров смогут его поддерживать). По сравнению с gif этот формат имеет множество преимуществ.

Давайте рассмотрим такого эффекта:

В данном примере используются два изображения (сплошные серые зоны здесь на самом деле являются прозрачными):

Сам скрипт несильно отличается от других примеров — так что я не буду здесь его распечатывать (впрочем, Вы конечно можете увидеть его, выбрав в меню Вашего браузера пункт 'View document source' ).

В Сети можно найти множество замечательных страниц, основанных на сочетании слоев с прозрачными частями. Некоторые из таких примеров Вы можете найти на моей странице с примерами JavaScript(она является частью home page моей книги о JavaScript и находится по адресу http://www.dpunkt.de/javascript /) — сама страница доступна как в английском, так и в немецком варианте.

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