Наука + Бизнес = $$$

Карта Сайта

Суббота, 21.10.2017, 11:27
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №4: бегущая строка в HTML

Бегущая строка в 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>

Alternate

Оформление бегущей строки

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

  • 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>

Движется вверху, путь ограничен 70-ю пикселями.

Задержка между движениями бегущей строки

  • scrolldelay - устанавливает время задержки между движениями бегущей строки.

Например, создадим такую строку, для наглядности сделаем ее зеленой и увеличим скорость:
<marquee scrollamount="40" scrolldelay="300" style="color:green">Установлено время задержки между движениями</marquee>

Установлено время задержки между движениями

Объекты в качестве бегущей строки

Cовсем не обязательно в качестве бегущей строки использовать текст, можно также использовать изображения, ссылки баннеры и т.д. Для этого просто необходимо поместить код встраиваемого объекта между тегами <marquee>. Например баннер в качестве бегущей строки будет выглядеть так:

Наш Баннер

Под баннером понимают изображение, в которое встроена ссылка, если вы кликните по этому баннеру, вы попадете на главную страницу сайта.


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru