Вернутся к Приемам HTML | Home (на главную) | htmljava.narod.ru

Движение слоя.

Все примеры в этом разделе работают только с Internet Explorer, прошу прощения.
Рассмотрим простейшый случай, как организовать движение слоя в горизонтальном направлении. Для начала нужно создать слой, который мы собираемся двигать:
<div id="layername" style="position:absolute; z-index:1; visibility:visible">
  Hello World!
</div>

Теперь собственно приступаем непосредственно к перемещению слоя! Для этого нам потребуется написать небольшой 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.

И вот что у нас получится:
Hello World!
 

Ниже приведем пример движения слоев по более сложной траектории. В этом примере слои создаются непосредственно в javascript'е с помощью метода document.write('<div ...>...</div>').
Пример:
<script language="javascript1.2"><!--
var no=3; // objects number
var speed=100; //
var clientx=0; //mestopolojenie
var clienty=0; // -||-||-
var clientwidth=100;
var clientheight=50;
var movespeed=5; //step size
dx=new Array(); //deltax
dy=new Array(); //deltay
cx=new Array(); //current x
cy=new Array(); //current y
function setxmovespeed(i){
dx[i]=movespeed-Math.round((Math.random()*movespeed)/2);
} function setymovespeed(i){
dy[i]=movespeed-Math.round((Math.random()*movespeed)/2);
}
for (i=0;i<no;++i){
setxmovespeed(i);
setymovespeed(i);
if((Math.random()*2-1)<0){dx[i]=-dx[i];}
if((Math.random()*2-1)<0){dy[i]=-dy[i];}
cx[i]=Math.random()*clientwidth;
cy[i]=Math.random()*clientheight;
document.write('<div id="fw'+i+'" style="POSITION:absolute; Z-INDEX: '+i+';');
document.write('VISIBILITY:visible;">Hello&nbsp;World!</div>');
} function floatingwords(){
for (i=0;i<no;++i){
if(cx[i]>clientwidth | cx[i]<0 | cy[i]>clientheight | cy[i]<0){
if(cx[i]>clientwidth){setxmovespeed(i); dx[i]=-dx[i];};
if(cy[i]>clientheight){setymovespeed(i); dy[i]=-dy[i];};
if(cx[i]<0){setxmovespeed(i);};
if(cy[i]<0){setymovespeed(i);};
}
eval('document.all["fw'+i+'"].style.top=clienty+cy[i]');
eval('document.all["fw'+i+'"].style.left=clientx+cx[i]');
cx[i]+=dx[i];cy[i]+=dy[i];
}
setTimeout('floatingwords()',speed);
} floatingwords();
--></script>

И выглядит все это так:
 

Заключение.
Вы можете использовать движение слоев в сочетании с событиями onmouseover="..." onmouseout="...". Например если навести мышь на кнопку, то в кнопке что-то начинает двигатся, если свести мышь с кнопки, то движение прекращается. Вобщем фантазируйте.
Вернутся к Приемам HTML | Home (на главную) | htmljava.narod.ru
Сайт управляется системой uCoz