Эта статья будет идти вне серии уроков.
Хотите научиться делать так? Тогда читайте...
Бегущая строка применяется на страницах где мало места. Она позволяет прокручивать заданный вами текст. Чтоб создать бегущую строку вам нужно поместить любой текст между тэгами
Code
<marquee>Здесь текст бегущей строки</marquee>
Ну вот впринципе бегущая строка и создана, но есть ещё много интересных возможностей этого тэга. Вот напрмер код:
Code
<marquee scrollamount="1" scrolldelay="20" width="50" height="150" bgcolor="#E9E9D1" behavior="scroll" direction="up">Бегущая строка</marquee>
отобразит следуещее:
Давайте разберёмся немного в свойствах тэга. Каждое свойство записывается внутри тэга
Code
<marquee здесь свойства>
scrollamount="1" – скорость движения строки. (Рекомендуется ставить скорость "1", в этом случае строка выглядит более удобочитаемо и не дёргается)
scrolldelay="20" – Этот атрибут задаёт временной интервал между шагами бегущей строки.
width="200" – ширина бегущей строки в пикселях.
height="17" – высота бегущей строки. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="#E9E9D1" – Задаёт фоновый цвет бегущей строки. (Вместо E9E9D1 подставляете свой цвет).
direction="left" – Задаёт направление движения бегущей строки. В данном случае это "left" в лево. Но также может применять значения "right" вправо, "up" вверх, "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 толщина границ бегущей строки в пикселях.
В результате получится такой код:
Code
<marquee style="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20" width="200" height="17" bgcolor="#E9E9D1" align="middle" direction="left">Бегущая строка</marquee>
Изменение текста бегущей строки
Для изменения текста его нужно как обычно обставить нужными тегами и всё это поместить например в предыдущий html код бегущей строки.
Code
<marquee style="BORDER: #000000 1px solid" scrollamount="1" scrolldelay="20" width="200" height="17" bgcolor="#E9E9D1" align="middle" direction="left">
<b><i><font face="Arial" size="2" color="#CC3300">Бегущая строка</font></i></b></marquee>
Для более удобного применения бегущей строки, можно добавить в неё несколько элиментов скрипта. В примере ниже добавлено две следующие функции:
onmouseover=this.stop(); - при наводе курсора мыши текст остановится;
onmouseout=this.start(); - при убирании курсора мыши текст продолжит своё движение.
Пример получившегося кода:
Code
<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>
