Статьи о Marquee
Альтернатива Marquee в JavaScript
Октябрь 2009 г.
В языке гипертекстовой разметки HTML, существует тег Marquee, с помощью которого в веб документах (сайтах) создаётся эффект автоматического скроллирования (прокрутки) помещённого в контейнер этого тега любого контента: графики, текста, форм. Тег Marquee был предложен для разработчиков веб приложений, программистами корпорации MicroSoft. Первоначально тег выполнялся только в веб-браузере Intrnet Exporer от MicroSoft, впоследствии производители других браузеров, включили в свои продукты интерпретацию этого тэга. Но у этого тэга есть ряд недостатков. Первый: Marquee не имеет спецификации в стандарте HTML, введённом в 1999 году, т.е. он не валиден и исходный код разметки содержащий marquee, соответственно, то же не валиден. Второй недостаток: несмотря на то, что marquee (бегущую строку) исполняют все современный графические веб-обозреватели Chrome Google, Opera, Safari, Mozilla Firefox, но поведение бегущей строки часто непредсказуемо в различных типах браузеров, и далеко не все атрибуты и значения тэга выполняются, что затрудняет создание кроссбраузерных, сложных сюжетов с использованием всех имеющихся в нём возможностей. Третий отрицательный момент: ограниченные возможности тэга, в создании анимации, в сравнении с другими технологиями анимирования контента в веб-документах. Но с другой стороны грамотно построенная анимация или скроллирование, позволяют привлечь внимание к товару или шире показать предлагаемый ассортимент на одной странице. И вот в том случае, когда необходима бегущая строка, а marquee принципиально неприемлем, то наилучший вариант это конечно JavaScript, скриптовый язык, который можно сказать кардинально изменил веб-программирование. В отличии от marquee, бегущие строки созданные с помощью Ява Скрипт, имеют гораздо больше настроек скроллинга, валидны и кроссбраузерны, а по отношению к flash и gif, существенно, более быстродействующие и легче по весу.
В Википедии об этом языке сказано так: JavaScript прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript. Разработан и внедрён совместно компаниями Netscape Communications и Sun Microsystems. JavaScript используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.. Для профессионального веб-программиста знание JavaScript необходимо, тем более кодинг на этом языке, считается лёгким в освоении. Но и для сайтостроителей, не отягощённых знаниями программирования, есть возможность использовать готовые скрипты в своих приложениях. И если речь идёт о скроллинге контента, то в любом поисковике по запросу: бегущая строка на JavaScript, будет выдано огромное количество ссылок с готовыми скриптами, которые в большинстве случаев можно скопировать совершенно бесплатно, и легально использовать, тем более вставить скопированный код скрипта, в исходный код веб страницы, не составляет никакого труда. Слегка погуглим и находим код, например вот такой:
<script type="text/javascript">
<!--
function tekst(msg,ctrlwidth)
{
msg = " "+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write ('<form name="Tekst">')
document.write ('<input name="tekst" value= "'+newmsg+'" size= '+ctrlwidth+' />')
document.write ('</form>')
prokrutka()
}
function prokrutka()
{
NowMsg=document.Tekst.tekst.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Tekst.tekst.value = NowMsg
bannerid=setTimeout("prokrutka()",90)
}
//-->
</script>
<script type="text/javascript">
tekst("Бегущая строка в JavaScript",40)
</script>
Не вникая особо, в его содержание, вставляем исходник скрипта в необходимый нам блок документа, а уж сам скроллируемый текст очень легко найти среди символов программного кода, и заменить его необходимым нам текстом:
Как мы видим, для редактирования (форматирования) контента и поля скроллинга нам вполне достаточно базовых знаний CSS. Конечно хорошо бы уметь писать скрипты самому, но если освоить программирование не судьба, то остаётся, только выискивать скрипты в Интернет, спасибо кодерам их в сети огромное количество на любой случай. Например, наличие бегущего текста на сайте, нравиться далеко не всем посетителям, существуют скрипты останова бегущей строки наведением мышки в поле скроллинга подобная опция предоставляется и в marquee (прим: но опять же с использованием скрипта) и тем более в JavaScript. Но проблема в том, что пользователь сайта далеко не всегда может догадаться о наличии возможности подобного останова, да и даже если он увидит, то согласитесь мой уважаемый читатель, удерживать мышку в поле прокрутки, что бы строка не бежала, нежелательно. Поэтому надо предоставить возможность выбора посетителю сайта, скроллировать текст или остановить, и управление остановом должно быть визуально заметно и понятно, как вариант такого управления это кнопка включения и выключения (стартстопный). На запрос такого скрипта, получаем массу ссылок, берём код скрипта, ну например вот этот:
<body onload="beg()">
<table width="400" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td width="100"><form>
<input type="button" value="Старт-Стоп" onClick="startstop()">
</form></td>
<td id="stroka"></td></tr></table>
<script type="text/javascript">
var dlina = 48;
var pos = 0;
var abort;
var skorost = 120;
function beg()
{
var text = ' Бегущая строка с кнопкой пуска и останова '
var pokaz='<pre style="background:#e0edf6;width:400px;">' +
(text + text).substring( pos, pos + dlina) + '</pre>';
if (navigator.appName == 'Netscape') with (document.stroka.document)
{
open(); write(pokaz); close();
}
else
stroka.innerHTML = pokaz;
pos ++;
if (pos > text.length)
pos = 0;
abort = setTimeout('beg()', skorost);
pauza = 0;
}
function startstop()
{
if (pauza == 0)
{
clearTimeout(abort);
pauza = 1;
}
else
{
beg();
pauza = 0;
}
}
</script>
Вставляем в исходный файл, используя каскадные таблицы стилей, мы можем изменить контент и кнопку управления с учётом дизайна веб документа. Но в этом примере мы не будем отягощать код селекторами CSS, главное это показать работоспособность скрипта.
Да, вот такую бегущую строку, пользователь всегда может остановить, если его не устраивает мелькание буковок в документе, согласитесь это его право. Но вернёмся к коду этого примера, речь в этой статье идёт не о программировании на JavaScript, а о том, как использовать готовые скрипты. Не смотря на то, что готовых скриптов, как автор указывал выше, огромное количество, и даже если Вы нашли нужный скрипт, может возникнуть желание, чуть чуть его изменить. Если с так скажем, внешним видом, всё достаточно просто используем CSS, то с параметрами скорости, направления скроллинга, поведением строки, несколько сложнее (естественно сложнее для непрограммиста), как найти настройки нужных параметров. Если желание изменить параметры скроллинга, возникло, то придётся влезть в код скрипта. В языках программирования применяются так называемые переменные, будем подходить к этим самым переменным, не как программисты-кодеры, а как обычные граждане. Понятие переменные, говорит само за себя, в них, что-то меняют или меняется (не константа одним словом). Легче всего увидеть и понять смысл переменной которая содержит текст. В последнем примере бегущей строки это text = ' Бегущая строка с кнопкой пуска и останова '. Имена переменных создаются произвольно самим программистом, но только латинскими буквами, для удобства имя переменной дают так, что было понятно для чего эта переменная создана, если в ней текст, то и назвали её text, а текстовый контент, это то, что мы можем поменять, т.е. переменить. Но надо иметь ввиду, что в отличии от тега MARQUEE в контейнер которого можно не раздумывая запихнуть килобайты контента, в скрипте объём контента имеет значение, и определяется другой переменной, в нашем примере это var dlina = 48;, где var - функция объявления переменной, dlina - имя объявленной переменной, 48 - количество знаков в строке т.е. объём контента. Переменная skorost, своим именем показывает, что это скорость скроллирования (120 мсек), хотя с точки зрения программирования это не скорость а задержка записи, но для пользователя это всё таки скорость. Переменная abort это прерывание, слово понятное наверное на всех языках. Конечно в нашем примере, имена переменных написаны латиницей, но русскими словами, и для русского человека чётко указывающими на своё назначение, но в скаченных скриптах имена переменных чаще всего не столь "говорящие". Понять, что это переменная помогает её объявление - VAR, ещё одним помощником при просмотре кода, служат текстовые редакторы с опцией подсветки кода. Имена функций, констант, методов, переменных, ссылок, операторов в таких редакторах имеют различные цвета. Ну, например, функции - цвет знаков (букв) - зелёный, операторы - синий, переменные - красные, правда единого цветового стандарта, не существует, в одних редакторах функции - зелёные, а в других - розовые, в третьих - черные, но всё равно подсветка облегчает просмотр исходного кода, например строка кода в которой записаны методы с "говорящими" именами, но уже по английски и не произвольно: open - открыть, write - записать (переменную pokaz) и close - закрытие. Кстати, программисты, при создании имён переменных, никогда не дают имён совпадающих с именами методов или функций, т.е. переменным никогда, не дадут такие имена, как open или close, даже если программист, англичанин. Вот, где поможет подсветка, разобраться, кто есть кто. С подсветкой (подцветкой) это будет смотреться, вот так:
{open(); write(pokaz); close()}
Методы, функции, переменные выделены разным цветом. Но, всё равно, без знания базовых основ программирования, сложно разобраться в коде, а ведь это маленькие, простенькие скрипты, могут быть скрипты записанные сотней и более строк кода. Впрочем, существует вариант скрипта - бегущей строки, со сверх минимальным использованием JavaScript. Обратим внимание в первом примере кода на метод document.write (). Наверное даже самый отъявленный двоечник сможет понять, что это метод записи в документ. Этот метод схож с функцией echo ""; которая есть во многих языках программирования. У программистов существует понятие простейшей программы или скрипта - вывод короткого сообщения. Традиционный пример - фраза приветствия на английском языке: Hello, World! (Привет, мир!), например PHP код такого скрипта: <?php echo "Hello, World!"; ?>. Аналог в JavaScript: <script type="text/javascript">document.write ('Hello, World!');</script>, но раз уж речь у нас идёт о бегущей строке, и зная, что контент, помещённый в контейнер <marquee> скроллируется. Мы возьмём этот скрипт, но с русским вариантом приветствия, да и запихнём его в шатёр: <marquee><script type="text/javascript">document.write ('Привет, мир!');</script></marquee>:
Если повнимательнее посмотреть коды примеров, мы увидим некое воздействие JavaScript на теги HTML (слово воздействие, неправильно с точки зрения программирования, но ведь речь идёт не о программировании, об использовании готовых скриптов). Главное, что мы видим метод document.write () позволяет выводить не только текст, но и текст в html-формате. Сделаем наоборот: поместим <marquee> в скрипт: <script type="text/javascript">document.write ('<marquee>Мир, Привет!</marquee>');</script>:
Ситуация схожа с последовательность слов в русском языке. Хочешь, говори: "МИР, ПРИВЕТ!", а хочешь: "ПРИВЕТ, МИР!". А, вот, если по английски сказать: "World, Hello!", то.......?, непереводимая игра слов. В статье Невалидность Marquee рассматривался пример создания валидной бегущей строки marquee. Этот вариант делался так, создан текстовый файл с расширением .JS - marquee.js, в котором записан вот такой код: document.write ('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1" scrolldelay="100" style="color:#000066; background-color:#99ff00; width:160px; height:20px; border-color:#663399; font-style:oblique; border-style:groove; border-width:medium;">Обычная бегущая строка</marquee>'), а уже в код страницы вставляем контейнер скрипта с указанием пути к этому текстовому файлу <script type="text/javascript" src="http://a-cto.narod.ru/script/marquee.js"></script> и смотрим результат скрипт вывел привычный вариант бегущей:
В чём плюсы такого варианта? Во-первых, для настройки внешнего вида и поведения бегущей строки, достаточно иметь базовые знания HTML и CSS, во-вторых такой код абсолютно валиден, ведь валидатор не проверяет указанный в скрипте текстовый файл и в-третьих это оптимизация кода при использовании бегущей строки на двух и более статических страницах сайта, в исходнике каждой страницы, только скрипт с указанием пути. Недостаток: несмотря на то, что это JavaScript, но это всё таки marquee, все недостатки которые она имеет, как то, различия воспроизведения строки различными типами и версиями веб-браузеров и ограниченное количество настраиваемых параметров. В JavaSript, можно создать не только любой вариант скроллинга из набора вариантов MARQUEE, но и гораздо более замысловатые сюжеты. Например один из вариантов, который почти всегда присутствует в коллекциях скриптов бегущей строки, хотя назвать этот скрипт, правильнее - эффект печатной машинки (побуквенного вывода текста). Этот пример, как и предыдущий уже используется на странице о невалидности Marquee, т.е. эти примеры используются в двух документах сайта А-СТО Дайджест. Поэтому просто повторяем действия: создание текстового файла (прим: конечно можно весь код скрипта, вставить в исходный текст документа), имя этому файлу text_print.js, вот с таким содержанием:
var line=" Реализация валидной бегущей строки в JavaScript ";
var speed=200;
var i=0;
function pechatanie() {
if(i++<line.length) {
document.pechat.pt.value=line.substring(0,i);
}
else{
document.pechat.pt.value=" ";
i=0;
}
setTimeout('pechatanie()',speed);
}А в исходник запишем вот такие контейнеры, два скрипта и форму:
<script type="text/javascript" src="/script/text_print.js"></script>
<form name="pechat">
<input name="pt" type="text" size="30" style="background-color:#eeeeee; border:0px; width:500px; " />
</form>
<script type="text/javascript">pechatanie();</script>Если нам понадобиться изменить настройки, то мы в текстовом файле изменим параметры объявленных переменных, например имя переменной var speed=200;, говорит, что это скорость (а точнее задержка) вывода букв на экран в миллисекундах.
Скрипт печати конечно интересный, но JavaScript позволяет программистам создовать, и более забавные эффекты, вот пример скрипта, который трудно описать, в коллекциях его называют текст с волной: прописные буквы последовательно заменяются на заглавные.
Вот код этого скрипта:
Мы снова видим вывод в поле формы, в которой через стиль удалена рамка поля, скорость перемещение "волны", а вернее задержка определена переменной var zaderzhka = 220;, в скрипте с печатающимся текстом это была переменная var speed=200;, если поменять имена этих переменных в двух последних скриптах, то на работоспособность это не повлияет. В этом примере мы ещё раз убеждаемся в более мощном механизме JavaScipt, при создании динамических эффектов в веб-документов по отношению к ограниченным возможностям Marquee, ниже приведён код, этого примера. При желании в сети Интернет можно найти скрипт удовлетворяющий самые невероятные фантазии дизайнера, ну а ещё лучше выучить это замечательный язык, и написать свой собственный скрипт.
в начало статьи
Marquee в текстовых браузерах Скорость Marquee Направление Marquee Поведение Marquee Старт и стоп в бегущей строке Ускорение и замедление в Marquee
Карта сайта