Unlimited HostingFree Drupal ThemesFree Drupal Themes

PostHeaderIcon Бегущая строка на сайт HTML

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

Перейдем ближе к делу:

Для создания бегущей строки используются теги <marquee>...</marquee>

  • width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.
  • height="..." - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
  • bgcolor="..." - определяет цвет фона бегущей строки.
  • behavior="..." задает тип движения (поведение) бегущей строки и имеет следующие значения:
    • scroll - циклическая прокрутка текста из одного конца в другой Бегущая строка
    • slide - текст появляется с одного края и останавливается у другого. Бегущая строка
    • alternate - текст перемещается от одного края к другому и обратно. Бегущая строка
  • direction="..." - определяет направление движения бегущей строки. Имеет следующие значения:
    • left - текст движется влево по строке Бегущая строка
    • right - текст движется вправо по строке Бегущая строка
    • up - вся строка перемещается снизу вверх Бегущая строка
    • down - строка движется сверху вниз Бегущая строка
  • scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например:
    scrollamount="1"
    scrollamount="2"
    scrollamount="3"
  • scrolldelay="..." - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например:
    scrolldelay="100"
    scrolldelay="200"
    scrolldelay="300"
  • loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
  • hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.
    hspace="10"
    hspace="0"
  • vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.
    hspace="0"
    hspace="10"

А теперь рассмотрим полный пример.

<marquee width=100% height="20" bgcolor="#0099FF" loop="-1" style="color:#000; font-weight:bold; " behavior="scroll" direction="left" scrollamount="7" scrolldelay="100">Я бегущая строка. Попробуй догони</marquee>

посмотреть демо можно тут

А теперь, если разобрать код, то: бегущая строка высотой 20 пикселей и шириной 100% движется со скоростью 7 и задержокй 100 милесекунд справа налево бесконечное число раз. Текст строки черный и выделен жирным.

Сейчас на сайте
Сейчас на сайте 0 пользователей и 4 гостя.
Поиск
Rambler's Top100 Яндекс.Метрика