|
|||||
Движение слоя.Рассмотрим простейшый случай, как организовать движение слоя в горизонтальном направлении. Для начала нужно создать слой, который мы собираемся двигать: <div id="layername" style="position:absolute; z-index:1; visibility:visible"> Hello World! Теперь собственно приступаем непосредственно к перемещению слоя! Для этого нам потребуется написать небольшой JavaScript. Движение происходит в горизонтальном направлении. Пример: <script language="javascript1.2"><!-- var curx=0; //текущее положение слоя var deltax=5; //шаг движения слоя (может быть и отрицательным!!!) var areawidth=100; //размер области, по которой движется слой function movelayer(){ //функция перемещения слоя curx+=deltax; //обновляем текущее положение слоя document.all["layername"].style.left=curx; //перемещаем слой в новое положение //нужно проверить не достигли ли мы точки поворота, если да, то //изменяем направление движения if(curx>areawidth | curx<0){deltax=-deltax;} //и рекурсивно вызываем эту же функцию movelayer. Таким образом у нас получился цыкл! setTimeout('movelayer()',50); } movelayer(); --></script>Движеие слоя в вертикальном направлении производится заданием значения объекту document.all["layername"].style.top=newposition. И вот что у нас получится:
Ниже приведем пример движения слоев по более сложной траектории. В этом примере слои создаются непосредственно в javascript'е с помощью метода document.write('<div ...>...</div>'). Пример: <script language="javascript1.2"><!-- И выглядит все это так:
Заключение. Вы можете использовать движение слоев в сочетании с событиями onmouseover="..." onmouseout="...". Например если навести мышь на кнопку, то в кнопке что-то начинает двигатся, если свести мышь с кнопки, то движение прекращается. Вобщем фантазируйте. |
|||||
|