Автор статьи: Головин Андрей
Динамический 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 |
Все эти свойства доступны как на чтение, так и на запись.
Таким образом, если мы имеем элемент
, то мы сможем его переместить в другую точку следующим кодом:
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.js). После чего разместить на странице столько изображений, сколько нужно вот так:
<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, то скорость каждого нового цикла будет выбираться случайно
Необходимо заметить, что перемещаемым элементом может быть не только изображение, а любой абсолютно позиционированный элемент.
<!—
<SCRIPT src=»/images/arti/blok10/floaters.js» type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>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;</SCRIPT>
<IMG id=fl1 style=»Z-INDEX: 100; POSITION: absolute» height=21 alt=»» src=»/images/arti/blok10/0032_01.gif» width=50 border=0>
<IMG id=fl2 style=»Z-INDEX: 100; POSITION: absolute» height=21 alt=»» src=»/images/arti/blok10/0032_01.gif» width=50 border=0>
<IMG id=fl3 style=»Z-INDEX: 100; POSITION: absolute» height=21 alt=»» src=»/images/arti/blok10/0032_01.gif» width=50 border=0> —>
