Business Insights
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Subscribe
Business Insights
Business Insights
  • Рекламным агентствам
  • Информационное спонсорство
  • Ссылки
  • О проекте
  • DHTML

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

  • 26.10.2001
Total
0
Shares
0
0
0

Автор статьи: Головин Андрей

Динамический 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

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

Таким образом, если мы имеем элемент

, следующего вида:

cool text

, то мы сможем его переместить в другую точку следующим кодом:

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> –>

Total
0
Shares
Share 0
Tweet 0
Pin it 0
alexvolkov

Previous Article
  • Все о Photoshop

“Хромированные” объекты. Способ 1

  • 25.10.2001
  • alexvolkov
Read More
Next Article
  • JavaScript

Использование Cookies

  • 26.10.2001
  • alexvolkov
Read More
You May Also Like
Read More
  • DHTML

Создание и использование атрибутов

  • alexvolkov
  • 12.11.2001
Read More
  • DHTML

Визуальные фильтры в IE

  • alexvolkov
  • 08.11.2001
Read More
  • DHTML

Отображение и скрытие элементов в IE и NN

  • alexvolkov
  • 02.11.2001
Read More
  • DHTML

Позиционирование для IE и NN

  • alexvolkov
  • 02.11.2001
Read More
  • DHTML

внешние файлы в IE и NN

  • alexvolkov
  • 23.10.2001
Read More
  • DHTML

Динамические элементы

  • alexvolkov
  • 07.09.2001

Добавить комментарий

Для отправки комментария вам необходимо авторизоваться.

  • Рассылка как продукт
    • 24.07.2020
  • Google назвал лучшие приложения App Store за 2018 год
    • 14.12.2018
  • Онлайн-конференция интернет-магазин от “А до Я” CyberE-com 2018
    • 25.05.2018
  • Бесплатная онлайн-конференция по управлению репутацией
    • 04.12.2017
  • Открыта регистрация на CyberMarketing-2017
    • 19.10.2017
Social Links
Facebook 0 Likes
Twitter 0 Followers
Instagram 0 Followers
Pinterest 0 Followers
YouTube 0 Subscribers
Twitter Feed
Marketer
  • Рекламным агентствам
  • Информационное спонсорство
  • Ссылки
  • О проекте
Статьи про рекламу, маркетинг, public relations, интернет

Input your search keywords and press Enter.