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

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

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

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

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

<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 обработчика события.. Он может использоваться, чтобы вызвать функцию много раз в течении некоторого временного интервала. Для этого на последних уроках мы использовали setTimeout(). setInterval() работает почти так же, но Вам нужно вызвать ее только один раз.

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

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

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

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

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

Wiki-учебник по веб-технологиям: JavaScript/ПеремещениеСлоев ...

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