Создадим для своего сайта бегущую строку или полосу прокрутки текста или картинок. Этот прием может пригодиться для галереи изображений, либо для показа баннеров и счетчиков, если их слишком много. Запущенный таким образом текст привлекает к себе внимание на странице, хотя и не стоит злоупотреблять данным приемом.
Для реализации эффекта бегущей строки применяется тег MARQUEE. Весь код, помещенный между открывающим и закрывающим тегами marquee будет перемещаться по экрану в зависимости от указанных вами настроек.
Создадим простейшую бегущую строку текста:
За такое перемещение строки на вашей странице отвечает тег marquee с атрибутом behavior="scroll" - строчка будет двигаться справа налево бесконечное количество раз.
Атрибут scrollAmount в данном случае отвечает за скорость движения строки и может изменяться от 0 до 10. Width - ширина поля, в котором движется строка. Height - его высота.
Теперь усложним задачу и запустим строку в обратном направлении - слева направо. Для этого в тег marquee нам придется добавить атрибут direction="right" и у нас получится следующее:
Изменяя значения direction на up или down мы можем получить соответственно двигающиеся снизу вверх либо сверху вниз строки:
Все эти строки приблизительно одинаково выглядят в различных броузерах - Internet Explorer, Firefox, Opera, Safari, Netscape Navigator.
Бегущая строка также может двигаться, изменяя свое направление при достижении противоположного края экрана. Для этого атрибуту behavior нужно придать значение alternate:
Обратите внимание на то, что данный вид полос прокрутки может некорректно отображаться в некоторых броузерах. Например, в Firefox, Netscape Navigator эта строка сразу показывается во весь размер, а не появляется из-за края экрана, а в Opera движение становится прерывистым.
Теперь сделаем так, чтобы наша полоса останавливалась при наведении на нее курсора мыши. На примере горизонтальной строки, двигающейся справа налево, покажем, как использовать для этого обработку событий onMouseOver и onMouseOut:
И, наконец, за создание бегущей строки с фиксированным количеством прокруток отвечает атрибут behavior="slide". Задать количество проходов можно атрибутом loop.