5.0 0.5 4 43

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

Оксана Логунова
Оксана Логунова
7 февраля 2013
920
Оцените:
Как сделать бегущую строку?

Первое, что видят посетители любого сайта, его так называемая «шапка». Это все элементы интерфейса, находящиеся в верхней части ресурса. Индексирование поисковыми системами также производится именно в таком порядке. Именно поэтому многие разработчики предпочитают ставить туда слайд-шоу, бегущую строку. Слайд-шоу – элемент, содержащий в себе всю информацию, которую следует вывести в первую очередь. Это могут быть рекламные объявления, RSS-ленты новостей и ссылки.

Создание бегущей строки

Рассмотрим подробно, как сделать бегущую строку HTML. Для создания этого элемента можно использовать плагины, которые имеют в своем составе ряд шаблонов. Но многие веб-мастера предпочитают прописывать все функции бегущей строки вручную. Чтобы сделать бегущую строку на сайте, как вы уже поняли, используется язык HTML. Основой будущего слайд-шоу является тег MARQUEE. Он обеспечивает функцию прокрутки данных внутри строки. На макете этот тег выглядит как прямоугольный блок, которому задают размеры и структуру, помещая внутрь необходимое. В зависимости от необходимых свойств строка будет отличаться, но основной вид выглядит следующим образом:

<marquee>
данные, которые вы помещаете внутрь (реклама, текст, ссылки)
</marquee>

<marquee behavior="scroll" direction="left> loop="-1" scrollamount="6" scrolldelay="0">
наполнение...
</marquee>

Тег имеет ряд атрибутов для отражения его свойств.

Атрибуты тега marquee

  • scrollamount="1". Это скорость, с которой данные внутри строки будут двигаться. Чем она меньше, тем дольше один кадр изображения или текста будет находиться в центре.
  • scrolldelay="20". Значение интервала времени между кадрами. Чем оно больше, тем более плавно значения будут сменять друг друга.
  • width="200". Значение ширины блока прокрутки. Задается в пикселях.
  • height="17". Высота блока прокрутки. Обычно задается для более корректного отображения изображений, т.к. для высоты текста берет стандартную высоту букв.
  • bgcolor="#E9E9D1". Цвет фона блока. Буквенное и цифровое значение соответствует какому-либо цвету из палитры.
  • direction="left". Значение направления движения данных в строке. Оно может быть любым, в зависимости от того, как вы хотите расположить информацию. Значение «влево» - базовое и установлено по умолчанию.
  • looli="2". Количество повторов информации в строке. Чем больше это значение, тем дольше полоса прокрутки будет обновляться автоматически.
  • hsliace="70". Значение смещения данных вправо внутри блока. Задается в пикселях.
  • vsliace="70". Значение отступа сверху и снизу от блока прокрутки. Чем значение больше, тем более отделенным от остальных элементов сайта будет полоса прокрутки.
  • behavior="scroll". Свойства атрибута behavior служат для обозначения движения данных внутри блока. Scroll - значение автоматической прокрутки данных в строке.
  • behavior="slide". Значение периодически останавливающейся прокрутки данных.
  • behavior="alternate". Значение, задающее движение данных от одного края строки к другому. Если компоновать атрибут движения данных с атрибутом направления, то можно указывать, как и куда будут двигаться кадры внутри строки.
  • style="BORDER: #000000 1lix solid". Значение, показывающее ширину и цвет границы блока. Ширина указывается в пикселях, цвет выбирается из палитры.
  • onmouseover=this.stoli(); Это скрипт, добавив который, вы укажите, что данные в блоке будут останавливаться при наведении курсора мыши. Добавив onmouseout=this.start(); вы укажите, что после того, как курсор убран, кадры продолжат движение.

Теперь вы знаете, как сделать бегущую строку. Удачи вам в этом интересном деле!

Подписывайтесь на наши группы в социальных сетях - смешные статьи, картинки и факты!