2013
18
Ноя

Сделать бегущую строку на сайте



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

Для создания бегущей строки есть тег <marquee>…</marquee>. Этот тег можно использовать не только для текста, но и для изображения.

Бегущая строка может располагаться как горизонтально, так и вертикально. В любом документе HTML может быть установлена бегущая строка.

<marquee> Классическая бегущая строка без дополнительных атрибутов, движется горизонтально, справа налево </marquee>

РЕЗУЛЬТАТ:

Классическая бегущая строка без дополнительных атрибутов, движется горизонтально, справа налево

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


Width - задает ширину бегущей строки в пикселях и процентах.

Height - высота бегущей строки в пикселях и процентах. Если бегущая строка в одну строку высота зависит от размера шрифта, поэтому высоту не указывают.

Bgcolor - цвет фона контейнера, в котором расположена строка. Если bgcolor не указан, то фон будет цвета фона страницы.

Direction - направление движения бегущей строки

  • left - направление влево
  • right - вправо
  • down - вниз
  • up - вверх

Behavior - определяет поведение строки. Этот тег имеет ряд параметров:

  • alternate - направление перемещения меняется на противоположное после выполнения
  • <marquee width="100%" height="50" behavior="alternate">направление перемещения меняется на противоположное после выполнения</marquee>

    РЕЗУЛЬТАТ:

    направление перемещения меняется на противоположное после выполнения
  • scroll - перемещение от края до края в одном направлении (по умолчанию),
  • <marquee behavior="scroll" direction="left">перемещение от края до края в левом направлении</marquee>

    РЕЗУЛЬТАТ:

    перемещение от края до края в левом направлении
  • slide - после перемещения заданного количества проходов строка остаётся без движения у левого или правого края
<marquee behavior="slide" direction="right">после перемещения вправо, строка остаётся без движения у края </marquee>

РЕЗУЛЬТАТ:

после перемещения вправо, строка остаётся без движения у края

Hspace - отступ по горизонтали до других объектов.

Vspace - отступ по вертикали до других объектов.

Loop - количество повторений перемещения (число 1 по умолчанию).

Scrollamount - скорость движения в пикселях (по умолчанию скорость равна 6 px/сек).

Scrolldelay - величина задержки в миллисекундах между шагами.

Truespeed - минимальное значение задержки между шагами, по умолчанию 60 мс.

Остановка строки с помощью курсора мыши


Если вы хотите, чтобы ваша строка останавливалась при наведении курсора мыши необходимо добавить:
onMouseOver="this.stop()" onMouseOut="this.start()"
Это удобно, когда нужно внимательно прочесть информацию.

<marquee onMouseOver="this.stop()" onMouseOut="this.start()" width="150" height="200" scrollamount="2" Direction="up" Bgcolor=#F0F0F0> Если вы хотите, чтобы ваша строка останавливалась при наведении курсора мыши и удобно было прочитать текст. </marquee>

РЕЗУЛЬТАТ:

Если вы хотите,чтобы ваша строка останавливалась при наведении курсора мыши и удобно было прочитать текст.


Бегущий элемент с использованием объекта


<marquee><img src="images/machine.png" alt="мащина" width="65" height="24" /></marquee>

РЕЗУЛЬТАТ:

машина