Главная » Статьи » Веб-дизайн

Бегущая строка JavaScript. Альтернатива Marquee в JavaScript

  Примеры использования готовых скриптов бегущей строки на JavaScript

В языке гипертекстовой разметки 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>

И не вникая особо в его содержание, вставляем исходник скрипта в необходимый нам блок документа, а уж сам скроллируемый текст очень легко найти среди символов программного кода, и заменить его необзходимым нам текстом:

Вот такая бегущая строка прекрасно работает в любом современном веб-браузере. Если возникнет желание убрать рамки формы, сделать так, что бы бегущая выглядела как в marquee, изменить фон поля скроллинга, шрифт, то сделать это несложно, вполне достаточно мало мальских знаний html и css. Повнимательнее смотрим вставленный код и видим в функции с говорящим названием document.write (запись в документ), html-теги формы. Прекрасно: с помощью атрибута style="border:0;font-weight:bold;  в input name="tekst", убираем рамку формы - border:0, и делаем буковки пожирнее и ярко-красными - font-weight:bold;color:#FF0000, фон скроллинга сделаем голубовато-зелёный background-color:#00FF99,. Но для создания второго примера, автор вынужден изменить имена переменных, в коде их несложно найти, они имеют произвольные имена, для удобства написано по-русски, но обязательно латинскими (английскими) буквами: function tekst () function prokrutka(), для того, что бы интерпритатор JavaScript понял это два разных скрипта, изменяем имена переменных, для удобства уберём два две последних буквы function tek () и function prokrut():

<script type="text/javascript">
<!--
function tek(msg,ctrlwidth)
{
  msg = "    "+msg
  newmsg = msg
  while (newmsg.length < ctrlwidth) {newmsg += msg}
  document.write ('<form name="Tek">')
  document.write ('<input name="tek" style="border:0;font-weight:bold;color:#FF0000;background-color:#00FF99;" value= "'+newmsg+'" size= '+ctrlwidth+' />')
  document.write ('</form>')
  prokrut()
}
function prokrut()
{
  NowMsg=document.Tek.tek.value
  NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
  document.Tek.tek.value = NowMsg
  bannerid=setTimeout("prokrut()",90)
}
//-->
</script>
<script type="text/javascript">
tek("Контент бегущей изменён с помощью CSS",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:#eeeeee;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, ниже приведён код, этого примера. При желании в сети Интернет можно найти скрипт удолеттваряющий самые невероятные фантазии дизайнера, ну а ещё лучше выучить это замечательный язык, и написать свой собственный скрипт.

 
 
Бегущая строка JavaScript | Альтернатива Marquee в JavaScript


Источник: http://a-cto.narod.ru/marquee/javascript.html
Категория: Веб-дизайн | Добавил: fotocom (30.04.2015)
Просмотров: 1601 | Теги: бегущая строка, веб-дизайн, скрипты | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети