Создадим для своего сайта бегущую строку или полосу прокрутки текста или картинок. Этот прием может пригодиться для галереи изображений, либо для показа баннеров и счетчиков, если их слишком много. Запущенный таким образом текст привлекает к себе внимание на странице, хотя и не стоит злоупотреблять данным приемом.

Для реализации эффекта бегущей строки применяется тег MARQUEE. Весь код, помещенный между открывающим и закрывающим тегами marquee будет перемещаться по экрану в зависимости от указанных вами настроек.

Создадим простейшую бегущую строку текста:
Горизональная бегущая строка, которая движется бесконечно.

За такое перемещение строки на вашей странице отвечает тег marquee с атрибутом behavior="scroll" - строчка будет двигаться справа налево бесконечное количество раз.
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="scroll" scrollAmount="3" width="" height="">текст бегущей строки или теги картинок</marquee>

Атрибут scrollAmount в данном случае отвечает за скорость движения строки и может изменяться от 0 до 10. Width - ширина поля, в котором движется строка. Height - его высота.

Теперь усложним задачу и запустим строку в обратном направлении - слева направо. Для этого в тег marquee нам придется добавить атрибут direction="right" и у нас получится следующее:
Горизональная бегущая строка, которая движется слева направо бесконечно.

Изменяя значения direction на up или down мы можем получить соответственно двигающиеся снизу вверх либо сверху вниз строки:
Вертикальная бегущая строка, которая движется снизу вверх бесконечно.
Вертикальная бегущая строка, которая движется сверху вниз бесконечно.
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="scroll" scrollAmount="3" width="" height="" direction="up">текст бегущей строки или теги картинок</marquee>
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="scroll" scrollAmount="3" width="" height="" direction="down">текст бегущей строки или теги картинок</marquee>

Все эти строки приблизительно одинаково выглядят в различных броузерах - Internet Explorer, Firefox, Opera, Safari, Netscape Navigator.

Бегущая строка также может двигаться, изменяя свое направление при достижении противоположного края экрана. Для этого атрибуту behavior нужно придать значение alternate:
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="alternate" scrollAmount="3" width="" height="">текст бегущей строки или теги картинок</marquee>
Горизональная бегущая строка, которая движется возвратно-поступательно.

Обратите внимание на то, что данный вид полос прокрутки может некорректно отображаться в некоторых броузерах. Например, в Firefox, Netscape Navigator эта строка сразу показывается во весь размер, а не появляется из-за края экрана, а в Opera движение становится прерывистым.

Теперь сделаем так, чтобы наша полоса останавливалась при наведении на нее курсора мыши. На примере горизонтальной строки, двигающейся справа налево, покажем, как использовать для этого обработку событий onMouseOver и onMouseOut:
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="scroll" scrollAmount="3" width="" height="" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">текст бегущей строки или теги картинок</marquee>
Горизонтальная строка, которая останавливается при наведении на нее курсора мыши.

И, наконец, за создание бегущей строки с фиксированным количеством прокруток отвечает атрибут behavior="slide". Задать количество проходов можно атрибутом loop.
В код вашей страницы вам нужно вставить следующее выражение: <marquee behavior="slide" scrollAmount="3" width="" height="" loop="1">текст бегущей строки или теги картинок</marquee>
Бегущая строка, делающая один проход по экрану