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

Перемещение слоёв


Свойства left and top определяют позицию слоя. Вы можете присвоить новые значения к этим свойствам, чтобы установить позицию слоя. Следующая строка устанавливает горизонтальную позицию уровня в 200 (в пикселях):

document.layers["myLayer2"].left= 200;

Теперь мы переходим к программе перемещающей слой - это напоминает прокрутчик внутри окна броузера.

This text is inside a layer

Сценарий выглядит следующим образом:

<html> <head> <script language="JavaScript"> <!-- hide

function move() { if (pos < 0) direction= true; if (pos > 200) direction= false;

if (direction) pos++ else pos--;

document.layers["myLayer2"].left= pos; }

// --> </script> </head> <body onLoad="setInterval('move()', 20)">

<ilayer name=myLayer2 left=0> <font size=+1 color="#0000ff"><i>This text is inside a layer</i></font> </ilayer>

</body> </html>

Мы создаем слой, с именем myLayer2. Вы можете видеть, что мы используем onLoad внутри тега <body>. Нам надо запустить прокрутку слоя, как только загрузится страница. Мы используем setInterval()



внутри onLoadобработчика события. Это - новый метод JavaScript 1.2 (то есть JavaScript версия, которая выполнена в Netscape Navigator 4.0). Он может использоваться, чтобы вызвать функцию много раз в течении некоторого временного интервала. Для этого на последних уроках мы использовали setTimeout()

for this in the last lessons. setInterval() работает почти так же, но Вам нужно вызвать ее только один раз.

Через setInterval() мы вызываем функцию move()

каждые 20 миллисекунд. Функция move()

устанавливает слой на некоторую позицию. Поскольку мы вызываем эту функцию, много раз мы получаем быструю прокрутку текста. Все, что мы должны делать в функции move() это вычислить позицию слоя и присвоить это значение document.layers["myLayer2"].left= pos.

Если Вы изучите исходный текст этой части учебника, Вы найдёте, что мой код выглядит немного по другому. Я написал код так, чтобы люди с более ранними версиями JavaScript-броузеров не получили никаких ошибок. Как это может быть достигнуто? Следующий код будет выполнен только броузерами, которые понимают JavaScript 1.2:

<script language="JavaScript1.2"> <!-- hide document.write("You are using a JavaScript 1.2 capable browser."); // --> </script>

Это - та же самая проблема, которая была у нас с Image-объектом. Мы можем переписать код подобным образом. Установка переменной browserOK решает проблему.

Следующий пример показывает, что слои могут накладываться:

This text is inside a layer

[предыдущая] [содержание] [следующая]

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

My JavaScript-book



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