Бегущая строка в html
Бегущую строку можно установить в любом документе, в котором поддерживается HTML. Бегущая строка может нам очень помочь, когда на маленьком участке экрана нужно разместить большой объём информации: многочисленные новости, баннеры, ссылки и пр.
Для того, чтобы текст, баннеры, или какие-либо другие элементы отображались в виде бегущей строки, есть специальный парный тег:
<marquee> </marquee>
У этого тега есть много атрибутов. Изменяя которые мы получим текст, который будет двигаться в разные стороны, с разной скоростью и по полосе любого цвета.
Атрибут behavior="..." – устанавливает тип движения бегущей строки и имеет следующие значения:
alternate - текст движется слева направо, достигнув края, меняет направление,
scroll - бегущая строка, достигнув края, появляется с противоположной стороны,
slide - бегущая строка останавливается у противоположного края страницы.
Атрибут direction="..." – определяет направление движения текста.
Значение down определяет движение текста вниз.
Значение up определяет движение текста вверх.
Значении left бегущая строка движется справа налево.
При right – слева направо.
width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.
height="..." - высота бегущей строки в пикселях или процентах.
(Если вы делаете бегущую строку в одну строчку, тогда можно высоту не указывать, она сама подбирается под размер букв).
bgcolor="..." - определяет цвет фона бегущей строки.
Пример бегущей строки:
<marquee> БЕГУЩИЙ ТЕКСТ </marquee>
По умолчанию текст движется справа налево, и будет прокручиваться бесконечное число раз.
Пример
<marquee behavior="slide" loop="infinite" width="350" bgcolor="yellow" height="25"style="font-size: 14pt; ">Бегущая строка</marquee>
<marquee behavior="alternate" width="350" bgcolor="yellow" height="25" style="font-size: 14pt;">Бегущая строка</marquee>
scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени, т.е. Scrollamount - скорость движения строки.
Например:
<marquee scrollamount="1" width="350" bgcolor="yellow" height="25">Бегущая
строка</marquee>
<marquee scrollamount="5" width="350" bgcolor="yellow" height="25">Бегущая
строка</marquee>
<marquee scrollamount="10" width="350" bgcolor="yellow" height="25">Бегущая
строка</marquee>
<marquee scrollamount="30" width="350" bgcolor="yellow" height="25">Бегущая
строка</marquee>
scrolldelay="..." - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах.
Например:
<marquee scrolldelay="100" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>
<marquee scrolldelay="200" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>
<marquee scrolldelay="300" width="350" bgcolor="yellow" height="25">Бегущая строка</marquee>
loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз. Если указать "10" текст проедет десять раз и больше показываться не будет. Только если ещё раз обновить страницу.
hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.
vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.
Aling= – определяет расположение текста в поле строки.
Значение top - определяет расположение текста вверху строки.
Значение bottom - определяет расположение текста внизу строки.
Значении middle - определяет расположение текста посередине строки.
Несколько примеров:
Код для бегущей строки: размером 50 пикселей в высоту и 350 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет жёлтый фон.
<marquee loop="infinite" behavior="altemate" bgcolor="yellow" direction="right" height="50" width="350" style="font-size: 14pt; ">
Пример берущей строки<font size="3" style="font-size: 12pt; ">.
</font></marquee>
Код для бегущей строки: размером 50 пикселей в высоту и 550 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается от одного края к другому и обратно и имеет фон цвета лайм.
<marquee loop="infinite" behavior="alternate" bgcolor="lime" direction="right" height="50" width="550" style="font-size: 14pt; ">
Пример берущей строки.
</marquee>
Если Вам необходимо написать большой текст на маленьком пространстве,
можно использовать бегущую строку.
Несколько примеров:
Код для бегущей строки: размером 100 пикселей в высоту и 450 пикселей в ширину.Строка перемещается снизу вверх и имеет фон цвета фуксия.
<marquee scrollamount="1" direction="up" width="450" bgcolor="fuchsia" height="100" style="font-size: 14pt; ">
Мне осталась одна забава:<br>
Пальцы в рот - и веселый свист.<br>
Прокатилась дурная слава,<br>
Что похабник я и скандалист.<br><br>
Ах, какая смешная потеря!<br>
Много в жизни смешных потерь.<br>
Стыдно мне, что я в бога верил.<br>
Горько мне, что не верю теперь.<br><br>
</marquee>
Код для бегущей строки: размером 100 пикселей в высоту и 450 пикселей в ширину.
Строка перемещается снизу вверх и имеет фон цвета лайм.
Для более удобного применения бегущей строки, можно добавить в неё несколько
элементов.
В примере ниже добавлено две следующие функции:
onmouseover=this.stop(); - при наводе курсора мыши текст остановится;
onmouseout=this.start(); - при убирании курсора мыши текст продолжит своё движение.
Пример получившегося кода:
<marquee direction="up" onmouseover=this.stop(); onmouseout=this.start(); width="450" bgcolor="lime" height="100" style="font-size: 14pt; ">
<br><br><center>
У лукоморья дуб зелёный;<br>
Златая цепь на дубе том:<br>
И днём и ночью кот учёный<br>
Всё ходит по цепи кругом;<br>
Идёт направо - песнь заводит,<br>
Налево - сказку говорит.<br></center>
</marquee>
Таким же образом могут перемещаться и изображения.
Код для бегущей строки (изображения):
<marquee><img src="http://diy-site.org/1.3.gif" border="0" alt="" /></marquee>
Код для бегущей строки (изображения):
<marquee direction="right" onmouseover=this.stop(); onmouseout=this.start();><img src="http://diy-site.org/1.1.gif" border="0" alt="" /></marquee>
Код для бегущей строки (изображения):
<center><marquee scrollamount="3" direction="up" onmouseover=this.stop(); onmouseout=this.start(); width="450" bgcolor="CCFFFF" height="250">
<center><img src="http://diy-site.org/1.2.gif" border="0" alt="" /></center>
</marquee></center>
Код для бегущей строки (изображения):
<marquee loop="infinite" behavior="alternate" direction="right" height="250" width="650">
<img src="http://diy-site.org/1.4.gif" border="0" alt="" />
</marquee>
