Бегущая строка на сайте
При разработке сайта интересным элементом дизайна, привлекающим внимание, может статьбегущая строка. Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка - самый простой способ создания анимации на сайте.
Бегущая строка формируется с помощью тега <marquee>...</marquee> (закрывающий тег обязателен). Первоначально тег <marquee> был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают его, хотя он не входит в спецификацию HTML. Из-за этого наличие на странице тега <marquee> приведет к невалидному коду, то есть ошибке при проверке, но её можно (и нужно) игнорировать. Так же следует учитывать, что браузеры по-разному отображают содержимое бегущей строки, так что при создании сайта обязательно проверяйте её вывод. Как всегда, на первом месте по непредсказуемости обработки HTML-кода стоит Internet Explorer, и тег <marquee> для него не исключение.
Для создания сайта особый интерес представляет то, что содержимое контейнера <marquee> не ограничивается простым текстом и позволяет перемещать любые элементы веб-страницы - изображения, текст, таблицы, элементы форм и т.д.
Длину бегущей строки можно ограничить, задав атрибут width (длина строки) или hspace (отступ от границ прокрутки) в пикселях или процентах. К слову о браузерах, в данном примере пришлось перед бегущей строкой ввести неразрывный пробел ( ) и задать style="letter-spacing: 0em", так как без этой "химии" Internet Explorer 7 (Must die!) некорректно выводил бегущую строку при масштабах показа страницы более 100%.
Если сделать какой-либо элемент бегущей строки ссылкой, то получается популярный в интернете трюк "поймай меня!", когда надо успеть захватить мышкой эту ссылку ( красный автомобиль в верхнем примере бегущей строки).
Перемещение бегущей строки можно задавать не только по горизонтали, но и по вертикали. В этом случае, как и в предыдущем, можно указать размеры области, в которой будет происходить движение (атрибуты width и height тега <marquee> соответственно):
В этом примере для вертикальной бегущей строки отличились уже браузеры Firefox 3.5 и Internet Explorer 7 и 8. Кроме необходимости вставлять неразрывный пробел ( ) перед началом бегущей строки, но и надпись "каско" выводится в них не по центру, а вот в Opera всё нормально. При желании, вы можете потренироваться в применении "тонких" методов HTML для центровки этой надписи в указанных браузерах.
Для бегущей строки можно устанавливать параметры перемещения элементов, что позволяет с легкостью создавать оригинальные эффекты. Рассмотрим основные атрибуты тега <marquee>:
- behavior - тип движения элементов бегущей строки:
- scroll - от края до края в одном направлении (по умолчанию),
- slide - после выполнения заданного числа проходов строка остаётся у левого или правого края страницы,
- alternate - направление перемещения меняется на противоположное после выполнения каждого цикла; - bgcolor - цвет фона бегущей строки;
- direction - направление движения бегущей строки:
- left - влево (по умолчанию),
- right - вправо,
- down - вниз,
- up - вверх; - height - высота бегущей строки;
- hspace - отступ от левой и правой границ области прокрутки;
- loop - число показов бегущей строки, по умолчанию - infinite (бесконечное) повторение;
- scrollamount - смещение в пикселях за один шаг;
- scrolldelay - величина задержки в миллисекундах между шагами. Используется для замедления перемещения элементов бегущей строки;
- truespeed - минимальное значение задержки между шагами, по умолчанию 60 мс;
- vspace - отступ по вертикали от границ прокрутки;
- width - ширина бегущей строки.
Текст и элементы, расположенные внутри тегов <marquee>...</marquee>, можно форматировать так же, как любые элементы веб-страницы.
Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (include), которую можно оперативно менять. Подойдут любые способы включения фрагментов в страницу сайта. Один из самых простых - с помощью JavaScript. На страницу, в том месте, где должна быть бегущая строка, вставляете
<marquee><script language="javascript" type="text/javascript" src="stroka.js" > </script></marquee>,
а сам текст бегущей строки выносите в отдельный файлик stroka.js, который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета выводимого текста:
// Java Document
document.write( "<font color=#cc3333>Текст бегущей строки</font>");
Проверьте, чтобы кодировка для этого файла была та же, что и у основной страницы. Если вы используете программу Adobe Dreamweaver, то для этого надо выбрать раздел меню Редактировать - Установки...- Создать документ - Java Script - Кодировка по умолчанию.
Конечно же, с помощью JavaScript можно создать дополнительные эффекты при выводе бегущей строки. Например, добавив внутрь тега <marquee onmouseover=this.stop() onmouseout=this.start()>, вы получите остановку бегущей строки при наведении на неё курсора мыши и продолжение её вывода при убирании курсора:
Также с помощью JavaScript можно сделать в виде бегущей строки и вывод <title> - названия страницы сайта, показываемого в верхней синей полосе браузера (см. вверху!). Для этого надо вставить следующий код перед тегом </head>:
<script language="javascript" type="text/javascript">
var tit = document.title;
var c = 0;
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length) {
c = 0;setTimeout("writetitle()", 3000)
} else {
c++;
setTimeout("writetitle()", 200)
}
}
writetitle()
</script>
Параметры "бегущего <title>" задаются с помощью цифровых аргументов кода, значение которых вы можете легко определить самостоятельно, поэкспериментировав с ними в HTML-редакторе. Однако особо увлекаться эффектами Java Script не советую, так как это, на мой взгляд, дурной тон, а кроме того, не забывайте, что выполнение сценариев может быть отключено в браузере пользователя и ваши дизайнерские "находки" пропадут зря.
