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

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

Бегущая html строка очень интересная штука. С ее помощью можно прокручивать фрагмент текста вертикально либо горизонтально, вверх или вниз, в зависимости от настроек. Это можно сделать с помощью тега <marquee>.

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

Примечание: вместо тега <marquee> рекомендуется использовать Javascript и CSS для создания таких эффектов.


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

Ниже приводится список атрибутов, которые могут использоваться с тегом <marquee>:

Атрибут Описание
width Определяет ширину бегущей строки. Значение задается в процентах: 10%, 20% и так далее
height Определяет высоту бегущей строки. Значение задается в процентах: 10%, 20% и так далее
direction Указывает направление, в котором должна двигаться бегущая строка
Значения могут быть: вверх (up), вниз (down), вправо (right), влево (left)
behavior Определяет тип прокрутки бегущей строки
scrolldelay Определяет паузу перед следующей прокруткой
scrollamount Определяет скорость прокрутки бегущей строки
loop Определяет сколько раз бегущая строка будет прокручиваться при первом открытии
страницы или после перезагрузки
bgcolor Определяет цвет фона
hspace Определяет горизонтальное пространство, в котором будет двигаться бегущая строка
vspace Определяет вертикальное пространство, в котором будет двигаться бегущая строка

Ниже приведены несколько примеров, чтобы продемонстрировать использование бегущей строки.

Пример 1:

<marquee>Это стандартный пример бегущей строки</marquee>

Вот результат:

Это стандартный пример бегущей строки

Пример 2:

<marquee width="50%">Ширина бегущей строки 50%</marquee>

Результат будет таким:

Ширина бегущей строки 50%

Пример 3:

<marquee direction="right">Текст прокручивается слева на право</marquee>

Такой результат:

Текст прокручивается слева на право

Пример 4:

<marquee direction="up">Текст прокручивается снизу вверх</marquee>

Результат:

Текст прокручивается снизу вверх

<<< Предыдущая статья Меню категории Следующая статья >>>

Ставив лайк Вы помогаете сайту :)

Статьи по теме:
Рейтинг:
5.0/5 из 3
Категория: Учебник HTML | Добавил: zaharchuk (14.11.2014)
Просмотров: 5736
Комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]