Как сделать бегущую строку на сайте?

тег - < marquee >.


Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы. В бегущей строке можно показывать рекламные обьявления, изображения, смайлики, баннеры и т. д.

бегущая строка, тег marquee

Сама бегущая строка создается тегом < marquee > текст </marquee >, а точнее создаёт динамический эффект автоматического скроллинга. Тег MARQUEE - блочный контейнер, аналогичный тегам P DIV SPAN, в который помещается нужная информация для отображения. Все моменты рассматривать довольно долго и сложно для начала, но здесь ниже будут показаны основные моменты для управления бегущей строкой и показаны примеры, на которых можно тренироваться.

Стандартная запись бегущей строки такая -
< marquee > текст внутри блока, или изображение, или несколько изображений, или ссылки </marquee > ,
соответствует такой записи -
< marquee behavior="scroll" direction="left" loop="-1" scrollamount="6" scrolldelay="0" > наполнение ... < /marquee >


Атрибуты тега MARQUEE.


direction=" " - атрибут устанавливающий направление скроллинга:
     Значения:
left - движение справа налево (по умолчанию)
right - движение слева направо
up - движение снизу верх
down - движение сверху вниз
behavior=" " - атрибут устанавливающий тип скроллинга:
     Значения:
scroll - скроллинг в одном из заданных направлений (по умолчанию)
slide - одноразовый скроллинг с остановом контента
alternate - возвратно-поступательный скроллинг


width=" " - устанавливает ширину блока для строки
height=" " - устанавливает высоту блока
hspace=" " - отступа в пикселях от вертикальных границ блока
vspace=" " - отступ в пикселях от горизонтальных границ блока



bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга
style=" " - атрибут указывает стиль форматирования блока и контента
class=" " - атрибут внедрение стиля форматирования блока и контента



loop=" " - определяет количество циклов перемещения
"-1" или "infinite" - безконечное перемещение наполнения в блоке
"N" - целое число, задающее количество показов в блоке



bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга

Атрибут     scrollAmount    - устанавливает скорость движения строки.



Примеры бегущей строки.


простая строка - по умолчанию
заданные размеры блока строки
меняем фон блока
движение слева направо
постоянное движение
снизу вверх

сверху вниз
меняем скорость на маленькую
медленное движение текста снизу вверх и наоборот
строка со ссылкой на сайт с примерами
бегущая строка с изображением

HTML - код примеров бегущей строки.

Вот такие простые примеры бегущей строки, а проявив фантазию, или определив цели для использования текстов в таком блоке, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.

по материалам сайта kapon.com.ua

Поделитесь ссылкой на статью...


Всего комментариев - 2.    Можете оставить свой комментарий.

Роман   2012-08-09 20:45:46   сайт автора -

Спасибо! Классная штука!

Antonina   2012-12-05 11:38:33   сайт автора - http://prosuperdom.com

Спасибо за замечательную подборку строк. Разместила у себя на сайте строку со ссылкой. Правда,сначала текст бежал под зеленой строчкой. Увеличила ширину, стал бежать по строчке. Когда изменила текст ссылки, она поднялась вверх и пришлось снова уменьшать ширину. Вот такие вот пришлось проделать манипуляции. Но строчку удалось установить в конкретную статью. А как сделать строчку просто на главной странице сайта,если он на Вордпрессе. Куда вставлять необходимый код? Если можно, подскажите, пожалуйста. Добро пожаловать в гости!


   Login *
   E-mail *
   URL (не обязательно)
- подписаться на сообщения        - я не спамер