Для создания бегущей строки есть специальный тэг: <marquee> и </marquee>
Все, что будет размещено между этими кодами, будет "бегать".
Но существуют различные параметры создания бегущих строк - различные атрибуты тэга.
Рассмотрим на примерах:
<marquee scrollamount="1" scrolldelay="20" width="300" height="20" bgcolor="#E9E9D1" behavior="scroll" direction="left">Бегущая строка сайта Pedsovet.su</marquee>
scrollamount="1" – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается)
scrolldelay="20" – Этот атрибут задаёт временной интервал между шагами бегущей строки.
width="200" – ширина бегущей строки в пикселях.
height="17" – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляете свой цвет).
direction="left" – Задаёт направление движения бегущей строки. В данном случае это "left" в лево. Но также может применять значения "right" вправо, "up" вверх, "down" вниз.
loop="2" – задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).
hspace="70" - Этот атрибут задает смещение в пикселах в право бегущей строки.
vspace="70" - Этот атрибут задает пустое пространство выше и ниже бегущей строки.
Атрибут behavior позволяет управлять свойствами движения текста, принимая разные значения:
behavior="scroll" – Прокрутка текста (В большинстве случаев можно не указывать, т.к. текст по умолчанию всегда прокручивается).
behavior="slide" – Прокрутка текста с остановкой.
behavior="alternate" – Движение от края к краю.
Для более красивого оформления бегущей строки можно выделить края подставив:
style="BORDER: #000000 1px solid"
Здесь #000000 это цвет, а 1px толщина границ бегущей строки в пикселях.
Для изменения текста его нужно как обычно обставить нужными тегами и всё это поместить например в предыдущий html код бегущей строки.
<marquee style="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20" width="200" height="17" bgcolor="#E9E9D1" align="middle" direction="left">
<font face="Arial" size="2" color="#CC3300">Бегущая строка</font></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"><font face="Verdana" size="2">Бегущая строка</font></marquee>
