Главная
К библиотеке

Позиционирование элементов.

Динамический HTML представляет нам широкие возможности позиционирования элементов страницы. Всего предлагается 3 типа расположения элементов: static - элемент не меняет своей позиции в документе, relative - позиция элемента определяется относительно его положения в тексте и absolute - позиция элемента задается абсолютными координатами в системе координат окна браузера.

Тип позиционирования задается правилом position: тип. Сама позиция задается правилами top и left. Например: DIV.positioned { position: absolute; top: 0; left: 0; }. Начало координат расположено в верхнем левом углу.

Для получения и задания координат в скриптах используются свойства элемента, которые описаны в следующей таблице:

Все эти свойства доступны как на чтение, так и на запись.

Таким образом, если мы имеем элемент <DIV>, следующего вида: <DIV ID="coolDIV" STYLE="position: absolute" >cool text</DIV>, то мы сможем его переместить в другую точку следующим кодом:

document.all.coolDIV.pixelTop = 0;
document.all.coolDIV.pixelLeft = 10;

В заключение, хочу вам предложить код, которым реализовано то безобразие с красными Volvo, которое уже натерло вам глаза.

   function moveFl(flName) {
     eval("fl = " + flName);
	 eval("el = document.all." + flName);
     if (el.style.pixelLeft >= document.body.scrollLeft) {
         el.style.pixelLeft -= fl.dx;
		 fl.x = el.style.pixelLeft;
	 }
	 else {
	    el.style.pixelLeft = document.body.clientWidth - 
		       el.style.pixelWidth + document.body.scrollLeft;
		fl.x = document.body.clientWidth - el.style.pixelLeft + 
		       document.body.scrollLeft;
		fl.y = Math.random()*(document.body.clientHeight - 
		       el.style.pixelHeight) + document.body.scrollTop;
		el.style.pixelTop = fl.y;
		if (fl.rnd) {
           fl.dx = Math.random()*20 + 1;
		}
	 }
   }

   function flStart(fl) {
	 fl.flTimer = setInterval("moveFl('" + fl.flName + "')",fl.speed);
   }
   
   function floater(flName, speed, dx, rnd) {
	 eval("el = document.all." + flName);
     this.flName = flName;
     this.x = document.body.clientWidth - el.style.pixelWidth + 
	          document.body.scrollLeft;
	 this.y = Math.random()*(document.body.clientHeight - 
	          el.style.pixelHeight) + document.body.scrollTop;
	 this.flTimer = null;
	 this.dx = dx;
	 this.speed = speed;
	 this.rnd = rnd;
	 el.style.pixelLeft = this.x;
	 el.style.pixelTop = this.y;
  }

Этот код можно загрузить к себе на машину (файл floaters.zip). После чего разместить на странице столько изображений, сколько нужно вот так:

<IMG ID="fl1" STYLE="position: absolute; z-index: 100"
 SRC="путь" WIDTH=50 HEIGHT=21 BORDER=0 ALT="">
<IMG ID="fl2" STYLE="position: absolute; z-index: 100" 
 SRC="путь" WIDTH=50 HEIGHT=21 BORDER=0 ALT="">
<IMG ID="fl3" STYLE="position: absolute; z-index: 100" 
 SRC="путь" WIDTH=50 HEIGHT=21 BORDER=0 ALT="">

И, после загрузки страницы (например в событии ONLOAD элемента BODY) проинициализировать каждую картинку следующим кодом:

  function startFloaters() {
     fl1 = new floater("fl1",1,2,true);
	 flStart(fl1);
     fl2 = new floater("fl2",1,5,true);
	 flStart(fl2);
     fl3 = new floater("fl3",1,3,true);
	 flStart(fl3);
  }
  var fl1;
  var fl2;
  var fl3;

Здесь вызов new floater(имя, скорость, приращение, случ_скорость) означает, что мы создаем двигающийся элемент на основе элемента с именем имя, скорость его перемещения скорость (точнее говоря это не скорость, а величина ей обратная) и приращение координаты за один такт приращение. Если случ_скорость равна true, то скорость каждого нового цикла будет выбираться случайно

Необходимо заметить, что перемещаемым элементом может быть не только изображение, а любой абсолютно позиционированный элемент.

Загрузить файл floaters.zip