Статьи о Marquee
Скрипты останова и пуска бегущей строки
Декабрь 2006 г.
Противники бегущих строк на web-страницах, аргументируют свое мнение тем, что некоторых, подчёркиваю некоторых пользователей посещающих сайты, раздражают бегущие и мигающие тексты, вполне можно согласиться с этим утверждением, но и отрицать, что всевозможные визуальные динамические эффекты, некоторых пользователей наоборот, очень привлекают.
Разовый скроллинг
Если брать конкретно тег бегущей строки <marquee>, то негласно рекомендуемым для него поведением предлагается, одноразовая прокрутка (одноразовый скроллинг с автоматической остановкой), выполняется это атрибутом поведения, со значением скольжения <marquee behavior="slide"> вот пример этого параметра:
<marquee behavior="slide" scrollamount="1" scrolldelay="160" bgcolor="#9f3" width="500px">контент бегущей</marquee>Атрибуты scrollamount="1" scrolldelay="160" вставлены для замедления прокрутки, что бы читатель мог наблюдать движение и останов. Но если использовать несколько разнонаправленных слайдов с дефолтной скоростью скроллинга, с графическим контентом, то можно сделать динамичную, "энергичную" страницу. Пример такой страницы предлагают, создатели тега <marquee> фирмы MicroSoft на сайте для веб-разработчиков: MSDN, который они назвали "летящий текст" (flying text) посмотреть пример, кстати упомянем, что <marquee behavior="slide"> чётко исполняется в браузерах от MicroSoft, т.е. в Internet Explorer, но в Огнелисе или в Опере старых версий, может не выполнятся, а выглядеть это будет, как обычный бесконечный скроллинг, так, что slide, реально "скользкий" параметр, задуманный с его участием сценарий, и прекрасно работающий в IE, может развалиться в FireFox'e (учитывая, что всё больше и больше пользователей предпочитают FF).
Одноразовый пробег контента можно указать в <marquee> атрибутом loop="1", отсутствие этого атрибута аналогично вставки его со значением -1 или (infiniti) выводит бесконечное количество прокруток (в течении всего времени просмотра веб-страницы). Значение 1 задаёт один пробег строки, но в отличии от <marquee behavior="slide"> поле скроллинга после прокрутки контента остается пустым:
<marquee loop="1" scrollamount="1" scrolldelay="180" style="background-color:#9f3;width:80%">контент бегущей</marquee>Атрибут петель позволяет создать останов после нескольких прокруток, например устанавливаем три пробега loop="3"
Что бы после трёх прокруток контент оставался в поле скроллинга, устанавливаем оба атрибута behavior="slide" loop="3"
Скрипты остановки Active X
Бегущая строка с атрибутами <marquee behavior="slide"> и <marquee loop="N"> это разовое действие, что бы его повторить надо перезагрузить страницу, т.е. снова зайти на неё, или нажать виртуальную кнопку "ОБНОВИТЬ" или же нажать кнопку F5 на клавиатуре компьютера. Но есть команды позволяющие выполнять остановку и запуск бегущей строки, без перезагрузки документа, это активные сценарии (Active X). Обратим внимание, что их выполнение возможно в том случае если действие элементов Active X разрешено в настройках браузера (в целях безопасности они могут быть отключены). Наверное самым известным сценарием такого типа, это останов бегущей строки наведением "мышки" aka курсор на поле скроллинга, в нашем примере оно как и футбольное, окрашено в зелёный цвет bgcolor="#99FF33", а пуск выведением из поля ширину, (в горизонтальном скроллинге длину пробега контента) мы зададим в 500 пикселей width="500px", ну а высоту height мы задавать не будем, её выставит браузер (в разных версиях она может оказаться разной, впрочем и указанная ширина наверняка выполниться только в IE, а вот скрипт останова и пуска сработает и в Лисе и в Опере, если конечно в браузере разрешено выполнение JavaScript:
<marquee onmouseover="this.stop()" onmouseout="this.start()" bgcolor="#9f3"width="80%">контент бегущей</marquee>Функция "object.stop()", так как выполнение происходит в теге, поэтому указан объект, и указан как "this" (этот). Впрочем несколько операторов позволяют создавать различные манипуляции остановкой и запуском в бегущей, вот пример, останов одним кликом в поле скроллинга, старт двойным кликом, что бы ширина пробега соответствовала 500 пикселей и в IE и в FF, ширину и цвет поля скроллинга укажем так же как и в примере с LOOP, т.е. через CSS, style="background:#9f3;width:80%"
<marquee onclick="this.stop()" ondblclick="this.start()" style="background:#9f3;width:80%">контент бегущей</marquee>Вариант с кликами удобен тем, что можно показать перемену функций т.е. сделаем наоборот, стоп двойным кликом, а остановка одинарным, порядок операторов кстати не имеет значения: <marquee onclick="this.start()" ondblclick="this.stop()" style="background:#9f3;width:80%">контент бегущей</marquee>
Далее смотрим скрипт управления старта и стопа левой кнопкой "мышки", нажатие и удержание кнопки onmousedown="this.stop()" это нажатие-удерживание, команда останова, а onmouseup="this.start()" соответственно пуск контента бегущей отпусканием кнопки:
Аналогично создаётся стартстопный нажатием, удержанием и отпусканием любой (any key) буквенной или цифровой клавиши клавиатуры onkeydown="this.stop()" onkeyup="this.start()" (но перед проверкой работы скрипта, на всякий случай стоит кликнуть по полю скроллинга, как бы закрепиться в поле)
Вот ещё один скрипт: останов движением мыши в поле скроллинга и пуск бегущей строки нажатием (кликом) любой клавиши на клавиатуре (прим: самый неудобный пример из всех, малейшее движение мыши в зелёном поле и текст останавливается) onmousemove="this.stop()" onkeypress="this.start()".
т.е.onkeydown="" onkeyup="" это onkeypress="" в одном флаконе, собственно как и onkeydown="" onkeyup="" это onclick=""
Сочетание команд может быть различно, лишь бы они были логичными, делаем вариант: остановка нажатием кнопки на клавиатуре, старт обычным кликом левой кнопки мышки:onkeypress="this.stop()" onclick="this.start()"
Аналогично скриптам остановки и пуска, можно создать скрипты замедления и ускорения отрисовки контента, пример работы подобного скрипта смотрим в Примеры Marquee.
Выбор пользователю!
Рассмотренные выше скрипты, несмотря на то, что исполняются почти во всех современных браузерах (Opera, FierFox, Safari, Chrome) естественно при условии включения поддержки JavaScript, хороши в качестве примеров работы кода, но для пользователей которые не желают видеть бегущий текст на странице они и на фиг не нужны, ведь они не догадываются, какие манипуляции необходимо сделать, чтобы остановить строку, а расписывать под каждым полем скроллинга действия с кликами, жестами курсора это трата полезной площади веб-страницы. Поэтому надо дать посетителю чёткую и понятную информацию об управлении бегущей строки.
Итак снова берём привычный "object.stop()", но управление теперь из одного тега (объекта), в другой, идентифицируем т.е присвоим имя для тега marquee, например <marquee id="beg">, команда будет такой "beg.stop()", и устанавливаем в созданные две нулевых ссылки (никуда не перенаправляющих) a href="#0", и указываем действие клик,(как самый привычный для пользователей)
остановить бегущую запустить бегущую
Общий код получиться вот таким:<marquee id="beg" style="background:#9f3;width:80%">контент бегущей</marquee> Такой вариант понятен любому посетителю веб, и у него есть выбор, оставить бегущую или остановить.
< onclick="beg.stop();">остановить бегущую</a> <a href="#0" onclick="beg.start();">запустить бегущую</a>
Можно создать привычные кнопки Stop и Start, снова создаём произвольное имя id="begtext", а команды записываем в тег кнопки <button onclick="begtext.stop();begtext.scrollLeft = 500;">STOP</button>, кстати добавим оператору остановки бегущей строки ещё одну функцию begtext.scrollLeft = 500; смещение контента влево на 500 пикселей по (команде "стоп"), а так как поле скроллинга равно 500 пикселей, то контент при остановке отобразиться в левой части поля (0px от левого края).
<marquee id="begtext"
style="background:#9f3;width:80%">контент бегущей</marquee><br />
<button onclick="begtext.stop();begtext.scrollLeft = 500;">STOP</button>
<button onclick="begtext.start();">START</button> Если установить О, то при остановке контент сместится на 0 пикселей влево в поле скроллинга, т.е. вообще не будет выведен, поле останется пустым (имя для этого примера мы тоже сменим, обойдёмся одной латинской буквой b b.scrollLeft = 0;.
Но и эти варианты, не очень привлекательны для пользователя, да у него есть возможность отключить строку, но это отвлекает от общего содержания документа, наилучший выход: контент бегущей строки при загрузке должен бsть статичным, а пользователь должен сам решить запускать её или нет, вот пример обеспечивающий пользователю такую возможность (пользователю IE соответственно, но не пользователю FF). Несколько парадоксальный вариант: стоп при старте: onstart="begstop.stop();" подразумевается старт скроллинга, поэтому контент не выводиться в поле, после команды "запустить бегущую" происходит один пробег контента (который можно прервать командой "остановить бегущую").
остановить бегущую запустить бегущую
<marquee id="begstop" onstart="begstop.stop();" style="background:#9f3;width:80%">контент бегущей</marquee>
<onclick="begstop.stop();">остановить бегущую</a> <a href="#0" onclick="begstop.start();">запустить бегущую</a>В этом варианте можно указывать и идентификатор begstop и this, ведь команда записана в самом теге marquee. В этом нам поможет убедиться следующий пример: вывод сообщения (алерт) после выполнения некоторого количества прокруток. Итак имя укажем id="begfin" , но запишем onstart="this.stop();", зададим количество прокруток четыре loop="4" (что бы не утомлять, кликаньем), а сообщение будет выведено скриптом действия при завершения скроллинга onfinish="alert();", и только ради уменьшения кода примера уберём команду "остановить бегущую".
<marquee id="begfin" onstart="this.stop();"onfinish="alert('Вы посмотрели этот текст 4 раза');"style="background:#9f3;width:80%">контент бегущей</marquee> <a href="#0" onclick="begfin.start();">запустить бегущую</a>Кстати надо заметить, в браузерах типа FireFox, останова скроллинга при старте не произойдёт, (пробег текста начнётся сразу после выгрузки страницы, а вот алерт после 4-х петель будет выведен на страницу).
Конечно onfinish="alert();" можно использовать не только для вывода сообщения, можно указать в нём ссылку и по окончанию скроллинга браузер начнёт загружать страницу указанную в адресе ссылки, или какой-нибудь более интересный скрипт окончания прокрутки, добавлю, что для варианта <marquee behavior="alternate"> существует такой элемент, как onbounce="", он аналогичен onfinish="", хотя onfinish выполняется с behavior="alternate">
Наиболее удобный и понятный вариант для пользователя, строка остановлена при загрузке, а включить и выключить её можно в любой момент присутствия на странице. Что бы обеспечить эту возможность запишем в тэг <body> скрипт указывающий, что в объекте с именем textbeg при выгрузке страницы браузером, контент должен быть статичным и смещён на 320 пикселей <body onload="textbeg.stop(); textbeg.scrollLeft = 320;">, записываем marquee c именем textbeg, а код будет аналогичен коду begtext
С помощью этого простого скрипта можно создать слайд-шоу (marquee скроллирует не только текст, но и графику), например демонстрация товаров в интернет магазине, или превью обоев для рабочего стола. Но приходиться в очередной раз оговариваться, что всё это приемлемо для Internet Explorer'a, который надо признать всё более и более сдаёт позиции Огненному Лису и Опере. Кстати вспомним, что в старых версиях браузеров интерпретирующих HTML-3, тег <button> не выполняется, так как был введён спецификацию, только в HTML-4, и что бы избежать искажений лучше вместо него использовать форму кнопок, а в скрипте указать объектную модель для документа, а так ка это сработает и в IExplorer и в FireFox, то назовём эту бегущую forfox
<marquee id="forfox" style="background:#9f3;width:80%">
Старт и Стоп в FireFox
</marquee>
<input type="button" value="СТОП" onClick="document.getElementById('forfox').stop();">
<input type="button" value="ПУСК" onClick="document.getElementById('forfox').start();">Не будем забывать, что в теге marquee, скроллируется не только текст, но и графика, т.е картинки любого формата. Построим простенький сюжет, забудем о своём автомобиле и представим себя в роли пешехода. Установим в контейнер <MARQUEE> указатель на графический файл с изображением автомобиля, а имя этому контейнеру присвоим avtostop, может и не совсем удачно, но ведь как то надо назвать. А в якоря поместим картинки хорошо знакомые пешеходам больших городов, зелёного и красного человечка. Тут главное не запутаться, что зелёный это стоп для автомобиля, а красный можно ехать дальше.
<marquee id="avtostop">
<img src="/img/avtostop.gif" alt="автомобиль" />
</marquee>
<a href="#0" onclick="document.getElementById('avtostop').stop();"><img src="/img/green.gif" alt="стоп" /></a>
<a href="#0" onclick="document.getElementById('avtostop').start();"><img src="/img/red.gif" alt="старт" /></a>Для простоты демонстрации кода откажемся от указания атрибутов поля скроллинга. Ну а для управления стопом и стартом, ещё раз напомню, зелёный человечек это стоп для автомобиля, а красный старт для автомобиля.
Если рассматривать этот пример c точки зрения построения сюжета, то при остановке автомобиля вращение колёс выглядит неестественно. Для построения визуально более правильного сюжета, можно использовать возможности яваскриптов. Возьмём скрипт замены картинки кликом:
<script type="text/javascript">
var x=false
function ch (obj,imgX,imgY)
{if (x)
{obj.src=imgX}
else
{obj.src=imgY} x=!x}
&/script>
С помощью любого редактора анимации берём один кадр (фрейм), лучше использовать первый, из файла avtostop.gif и сохраняем его с каким-нибудь другим именем, например: avtostop1.gif
Так же поступим и с тегом marquee присвоим ему другое имя, бесхитростно id="avtostop2", и ещё присвоим имя графическому файлу id="avto", ну а так, как onclick уже задействован, то используем нажатие кнопки: onmousedown="ch(avto,'/img/avtostop.gif','/img/avtostop1.gif')"
<marquee id="avtostop2">
<img src="/img/avtostop.gif" id="avto" alt="автомобиль" />
</marquee>
<a href="#0" onclick="document.getElementById('avtostop').stop();" onmousedown="ch(avto,'/img/avtostop.gif','/img/avtostop1.gif')"><img src="/img/green.gif" alt="стоп" /></a>
<a href="#0" onclick="document.getElementById('avtostop').start();" onmousedown="ch(avto,'/img/avtostop.gif','/img/avtostop1.gif')"><img src="/img/red.gif" alt="старт" /></a>
Автор даже не будет спорить, с тем, что код корявый и топорный, конечно программист JavaScript напишет более изящный и лёгкий код, но с другой стороны, всё очень наглядно и работоспособно.
в начало статьи
Текст в Marquee Графика в Marquee Формы в Marquee Направление Marquee Поведение Marquee Непрерывная бегущая строка Индексация Marquee Апокриф веб-дизайна
