Урок №4: бегущая строка в HTML
В последнее время бегущую строку заменили более продвинутыми и привлекательными скриптами. Она устарела с точки зрения дизайна и сейчас довольно редко встречается на сайтах. К тому же, в HTML5 и XHTML запретили теги бегущей строки, и они просто не работают. И все же ее можно использовать для привлечения внимания посетителей на важные для вас блоги.
- <marquee> - в этот парный тег берется текст, который будет использован в качестве бегущей строки. Данный тег имеет большое количество параметров, которые мы рассмотрим на этом уроке.
Направление движения бегущей строки
- direction - этот параметр определяет направление движения бегущей строки и имеет следующие значения:
- left - бегущая строка движется справа налево(значение по умолчанию)
- right - бегущая строка движется в правую сторону
- up - бегущая строка движется снизу вверх
- down - бегущая строка перемещается вниз
Поэтому, если задать такой код: <marquee direction="right">Бегущая строка движется в правую сторону</marquee>, в браузере мы увидим:
|
|
Скорость движения бегущей строки
- scrollamount - определяет скорость движения бегущей строки, чем меньше значение этого параметра, тем медленнее будет двигаться ваша строка. Например, создадим две строки:
<marquee scrollamount="35">Быстрая бегущая строка</marquee>
<marquee scrollamount="2">Медленная бегущая строка</marquee>
|
|
В браузере видно, что скорость данных бегущих строк значительно отличается.
Способ движения бегущей строки
- behavior - данный параметр определяет способ движения бегущей строки и имеет следующие значения:
- alternate - строка будет перемещаться между противоположными сторонами окна
- acroll - контент перемещается в направлении, заданном параметром direction, скрывается за окном, а за тем начинает свое движение сначала
- alide - контент перемещается в направлении, заданном параметром direction, после чего, доходя до края окна - останавливается
Пример: <marquee behavior="alternate">Alternate</marquee>
Оформление бегущей строки
Чтобы украсить бегущую строку можно использовать любые теги форматирования текста. Также можно задать фон и цвет текста бегущей строки.
- bgcolor - задает цвет фона бегущей строки.
- style - c помощью этого параметра можно изменить стиль и цвет текста бегущей строки.
Для примера рассмотрим две бегущие строки с такими параметрами:
<marquee bgcolor="#CDCD00">Фон бегущей строки</marquee>
<marquee style="color:red"><strong>Цвет бегущей строки</strong></marquee>
|
|
Можно использовать любой код цвета из Таблицы кодов цветов
Ограничения бегущий строки
- width и height - ограничение пути бегущей строки шириной и высотой, т.е не обязательно она должна проходить до конца окна браузера.
- loop - задает количество раз прохождения бегущей строки (по умолчанию бесконечно).
- truespeed - отменяет ограничение скорости при низких показателях параметра scrolldelay
- hspace и vspace - ограничивают поля бегущей строки, значение необходимо указывать в пикселях.
Для примера зададим такие параметры: <marquee direction="up" height="70">Движется вверх, путь ограничен 70-ю пикселями.</marquee>
|
|
Задержка между движениями бегущей строки
- scrolldelay - устанавливает время задержки между движениями бегущей строки.
Например, создадим такую строку, для наглядности сделаем ее зеленой и увеличим скорость:
<marquee scrollamount="40" scrolldelay="300" style="color:green">Установлено время задержки между движениями</marquee>
|
|
Объекты в качестве бегущей строки
Cовсем не обязательно в качестве бегущей строки использовать текст, можно также использовать изображения, ссылки баннеры и т.д. Для этого просто необходимо поместить код встраиваемого объекта между тегами <marquee>. Например баннер в качестве бегущей строки будет выглядеть так:
Под баннером понимают изображение, в которое встроена ссылка, если вы кликните по этому баннеру, вы попадете на главную страницу сайта.
|
R598551293139
