IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


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

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

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

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

Наименование

Содержание

top

Расстояние от верхней точки системы координат с указанием единиц измерения. Например: "10px", "2pt"

left

Расстояние от крайней левой точки системы координат с указанием единиц измерения. Например: "10px", "2pt"

pixelTop

Расстояние от крайней левой точки системы координат в пикселях. Например: 10, 25

pixelLeft

Расстояние от крайней левой точки системы координат в пикселях. Например: 10, 25

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

Таким образом, если мы имеем элемент <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

Источник: http://exper.ural.ru/

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.