Бегущую строку
можно применять, там где мало места. Например на главной (ну и других)
страницах сайта, для анонсирования новостей или ещё чего подобного.
Бегущая строка создаётся с помощью тэгов <marquee> и </marquee>.
Достаточно всего на всего написать какой-ни будь текст между этими
тэгами и он при просмотре в браузере будет двигаться (прокручиваться) в
левую сторону.
<marquee>Здесь текст бегущей строки</marquee>
Естественно тэг <marquee>, как и большинство других HTML тэгов имеет специальные атрибуты, в которых можно задать нужные свойства.
Вот пример кода бегущей строки с использованием некоторых атрибутов:
<marquee scrollamount="1" scrolldelay="20"width="200" height="17" bgcolor="#E9E9D1" behavior="scroll"direction="left">Бегущая строка</marquee>
scrollamount="1"
– скорость движения строки. (Рекомендуется ставить скорость"1", в этом
случае строка выглядит более удобочитаемо и не дёргается)
scrolldelay="20" – Этот атрибут задаёт временной интервал между шагами бегущей строки.
width="200" – ширина бегущей строки в пикселях.
height="17"
– высота бегущей строки. (Если Вы делаете бегущую строку в одну строчку,
то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляете свой цвет).
direction="left"
– Задаёт направление движения бегущей строки. В данном случае это
"left" влево. Но также может применять значения "right" вправо, "up"
вверх, "down" вниз.
Т.е. вот пример разных направлений движения:
| direction="right" – движение текста вправо. | |
| direction="up" – движение текста в верх. | |
| direction="down" – движение текста вниз. | |
Кстати при создании бегущей строки движущейся влево, необязательно писать атрибут direction="left" т.к. по умолчанию она всегда движется влево и по этому чтобы место не занимать можно не писать.
loop="2"
– задаёт число проходов бегущей строки. (Еслиуказать "2" то два раза
текст проедет и больше показываться не будет, только если ещё раз
обновить страницу).
hspace="70" - Этот атрибут задает смещение в пикселах в право бегущей строки.
vspace="70" - Этот атрибут задает пустое пространство выше и ниже бегущей строки.
Атрибутbehavior позволяет управлять свойствами движения текста, принимая разные значения:
behavior="scroll" – Прокрутка текста (в большинстве случаев можно не указывать, т.к. текст по умолчанию всегда прокручивается).
behavior="slide" – Прокрутка текста с остановкой.
behavior="alternate" – Движение от края к краю.
Атрибуты управляющие движением текста можно группировать. Например написав стразу два атрибута direction="up" и behavior="alternate" текст будет двигаться от верха к низу и обратно.
Используя два атрибута direction="up" иbehavior="slide" текст поднимается снизу вверх и достигнув самого верха останавливается.
Для более красивого оформления бегущей строки можно выделить края подставив:
style="BORDER: #000000 1px solid"
Здесь #000000 - это цвет, а 1px - толщина границ бегущей строки в пикселях.
В результате получится такой код:
<marqueestyle="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20" width="200"height="17" bgcolor="#E9E9D1"align="middle" direction="left">Бегущая строка</marquee>
Изменение текста бегущей строки
Для
изменения текста его нужно как обычно обставить нужными тегами и всё
это поместить например в предыдущий html код бегущей строки.
<marqueestyle="BORDER: #000000 1px solid" scrollamount="1"scrolldelay="20" width="200"height="17" bgcolor="#E9E9D1"align="middle" direction="left">
<b><i><fontface="Arial" size="2" color="#CC3300">Бегущая строка</font></i></b></marquee>
Для
более удобного применения бегущей строки, можно добавить в неё
несколько элиментов скрипта. В примере ниже добавлено двеследующие
функции:
onmouseover=this.stop(); - при наводе курсора мыши текст остановится;
onmouseout=this.start(); - при убирании курсора мыши текст продолжит своё движение.
Пример получившегося кода:
<marquee onmouseover=this.stop(); onmouseout=this.start(); style="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20"width="115" height="70" bgcolor="#E9E9D1" align="middle"direction="up"><fontface="Verdana" size="2">Бегущая строка</font></marquee>
Примечание - в браузере Netscape всё это может не работать :(