|
||||||||||
|
||||||||||
Позиционирование элементов |
||||||||||
Динамический 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; В заключение, хочу вам предложить код, которым реализовано то безобразие с красными Volvo, которое уже натерло вам глаза. function moveFl(flName) { Этот код можно загрузить к себе на машину (файл floaters.zip). После чего разместить на странице столько изображений, сколько нужно вот так: <IMG ID="fl1" STYLE="position: absolute;
z-index: 100" И, после загрузки страницы (например в событии ONLOAD элемента BODY) проинициализировать каждую картинку следующим кодом: function startFloaters() { Здесь вызов new floater(имя, скорость, приращение, случ_скорость) означает, что мы создаем двигающийся элемент на основе элемента с именем имя, скорость его перемещения скорость (точнее говоря это не скорость, а величина ей обратная) и приращение координаты за один такт приращение. Если случ_скорость равна true, то скорость каждого нового цикла будет выбираться случайно Необходимо заметить, что перемещаемым элементом может быть не только изображение, а любой абсолютно позиционированный элемент.
Источник: http://exper.ural.ru/
|
||||||||||
|
||||||||||
Copyright © "Internet Zone", info@izcity.com | ||||||||||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |