Материал: Web-дизайн. лабораторный практикум. Суворов А.П., Проценко В.Н
для relative точкой отсчета является то место, в котором разместился бы элемент страницы, если бы не было представлено никакой информации о местоположении;
top - используется для указания вертикального смещения элемента от точки отсчета. Величина смещения может выражаться в различных единицах (пикселы, дюймы, сантиметры, миллиметры и т.п.). В наших примерах используются пикселы. Положительное значение top соответствует смещению элемента страницы вниз, в то время как отрицательное - по направлению к верхней границе окна браузера; left - подобен атрибуту top, но применяется для указания горизонтального направления. Положительное значение соответствует сдвигу элемента вправо, отрицательное - влево.
<html>
<head>
<title>Простая страница</title> </head>
<body>
<h1 style=" text-decoration: underline">Добро пожаловать на нашу страницу!</h1>
<р style="position:absolute; top:125px; left:200рх">Простой текст для позиционирования.</р>
</body>
</html>
C помощью CSS текст расположен со значением absolute, то есть, его положение отсчитывается от верхнего левого угла окна браузера. Значение атрибута top равно 125рх, таким образом, текст будет расположен на 125 пикселов ниже верхнего края страницы. Значение атрибута left равно 200рх, то есть текст будет сдвинут на 200 пикселов от левого края окна браузера.
1.5.Создание анимационных объектов
Анимация - это процесс «оживления» объекта Анимация включает в себя две составляющие: расстояние между
соседними кадрами, называемое скачком (jump), и временной промежуток между двумя последовательными скачками, называемый интервалом (interval). При больших скачках и длительных интервалах анимация выглядит
55
медленной и грубой. Движение объектов кажется неестественным и воспринимается как мелькание. При малых скачках и кратких интервалах анимация выглядит более плавной, хотя, если чересчур увлечься, движение покажется нарочитым.
1. Пример перемещения текста слева направо
Сначала следует ввести текст в тэге <div>, ограничивающем текст, добавить идентификатор id.
<html>
<head>
<title>Простая страница</title> </head>
<body>
<div id="anim">
Текст, шагом марш! </div>
</body>
</html>
Затем воспользуемся CSS, чтобы поместить текст в начальное положение:
<html>
<head>
<title>Простая страница</title> </head>
<body>
<div id="anim" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
Далее начинаем работать над сценарием JavaScript. Поскольку не нужно, чтобы текст вечно двигался вправо, надо предусмотреть возможность контролирования этого процесса. Чтобы запустить сценарий на выполнение только при условии, если текст находится , например, менее чем в 500 пикселах от левой границы экрана, удобнее всего воспользоваться оператором if. Для этого понадобится атрибут CSS pixelLeft.
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
56
if (anim.style.pixelLeft < 500)
{
}
}
</script>
</head>
<body>
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
Теперь рассмотрим операторы, управляющие анимацией. Прежде всего нужно задать скачок. Каждый раз текст будет перемещаться вправо на 50 пикселей. Атрибут pixelLeft используется не только для определения положения текста, но и для изменения положения на 50 пикселей:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
if (anim.style.pixelLeft < 500)
{
anim.style.pixelLeft +=50;
}
}
</script>
</head>
<body>
<div id="anim" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
Далее речь пойдет об интервале. Он задается с помощью метода setTimeout, позволяющего вновь запустить функцию после истечения определенного промежутка времени. Давайте установим интервал до повторного запуска функции moveTxt(), равным 5000 мс:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript">
57
<!-- Маскируемся! function moveTxt()
{
if (anim.style.pixelLeft < 500)
{
anim.style.pixelLeft +=50; setTimeout("moveTxt()", 5000);
}
}
</script>
</head>
<body>
<div id="anim" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
Процесс будет повторяться до тех пор, пока условие оператора if не станет ложным. Последнее, что нужно сделать, - запустить сценарий на выполнение. Для этого следует воспользоваться событием onLoad:
<html>
<head>
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
if (anil.style.pixelLeft < 500)
{
anil.style.pixelLeft +=2; setTimeout("moveTxt()", 50);
}
}
</script>
</head>
<body onLoad="moveTxt()">
<div id="anil" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
2. Пример движения текста по диагонали
<html>
<head>
58
<title>Простая страница</title> <script language="JavaScript"> function moveTxt()
{
if (anim.style.pixelTop < 500)
{
anim.style.pixelTop + = 2; anim.style.pixelLeft +=2; setTimeout("moveTxt()", 50);
}
}
</script>
</head>
<body onLoad="moveTxt()">
<div id="anim" style="position:absolute; left:10; top:10">
Текст, шагом марш! </div>
</body>
</html>
1.6.Слои
Позиционирование слоя
Для создания слоев следует использовать тег <div> или <span>. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент <div>. При размещении текста внутри параграфа применяется тег <span>.
В табл. 1.15 перечислены наиболее важные атрибуты.
|
Таблица 1.15 |
id |
Имя слоя, используемое для указания его в <script> |
left |
Позиция слоя по x координате |
top |
Позиция слоя по у координате |
|
Задает относительную или абсолютную позицию относительно |
position |
других объектов |
|
Позиция слоя при наложении нескольких объектов друг на |
z-index |
друга |
width |
Ширина слоя в пикселах или % |
height |
Высота слоя в пикселах или % |
bgColor |
Цвет фона слоя |
background |
Картинка фона |
src |
Внешний html документ, содержащийся в слое |
|
59 |