Бегущая строка JavaScript. Начало.
Привет! Сегодня я расскажу тебе о том, как сделать бегущую строку. Ты наверное удивишься: «Что можно рассказывать о тэге MARQUEE ?» Но рассказывать я буду не о нём, т.к. при помощи этого тэга получаются не очень (очень не) интересные бегущие строчки. Ну сам посмотри:
<MARQUEE STYLE="width:150px">Добро пожаловать на KroBel.narod.ru</MARQUEE>
По привычке использую CSS (STYLE="width:150px"), но можно и просто WIDTH=150 указать. Да, кстати, ты наверняка видел бегущую строчку с объявлениями на главной странице? Вот мы и попытаемся сделать что-нибудь подобное. По проще, конечно, но…
Что нам потребуется? Нам нужен будет слой и JavaScript . Как определим слой? Мы не будем определять слой тэгом DIV , а определим при помощи тэга SPAN в котором выровняем текст по левому краю (я использую CSS, ты же пиши как удобно)
<SPAN ID=”runstr” STYLE="text-align:left;"></SPAN>Давай сразу позаботимся о пользователях у которых отключен JavaScript :
<SPAN ID=”runstr” STYLE="text-align:left;"></SPAN>
<NOSCRIPT>
<MARQUEE STYLE="width:150px">Добро пожаловать на KroBel.narod.ru</MARQUEE>
</NOSCRIPT> Информация тэга NOSCRIPT отображается только в браузерах не поддерживающих JavaScript , а остальные тэг пропускают. Т.е. даже если бы я привёл пример под листингом ничего небыло бы видно, если у тебя, конечно, включен JavaScript. Так же, чтобы код не выводился мы закомментируем его, поставив комментарий HTML.
И так каков алгоритм? Нам нужно выводить по 1 символу через определённые промежутки времени. Самое простое – просто добавлять в слой по символу, но как оказалось такой способ не срабатывает в некоторых браузерах. Поэтому мы пойдём по более сложной дороге: Каждый раз мы будем обновлять текст в слое полностью, увеличивая его на один символ. Наверное, тебе покажется, что это очень громоздко, но браузеры иногда испытания и посерьёзнее выдерживают. А для эффекта печатной машинки сделаем промежуток между выводом нового символа (а точнее строки с новым символом) случайным от 120 до 240. Нет… это не секунды, это тысячные секунды! Когда мы доходим до последнего символа в строке, мы делаем паузу в секунды 3 и начинаем сначала. И так до умопомрачения… Вроде всё объяснил, теперь полный листинг с комментариями.
<SPAN ID=”runstr” STYLE="text-align:left;"></SPAN>
<NOSCRIPT>
<MARQUEE STYLE="width:150px">Добро пожаловать на KroBel.narod.ru</MARQUEE>
</NOSCRIPT>
<script language="javascript" type="text/javascript">
<!--
pos = 0;//Обнулили позицию символа, что бы начать с первого.
var newtext, newint, ident; //строка символов, время задержки, переменная задержки.
var msg = "Добро пожаловать на KroBel.narod.ru"; // Записали сообщение в переменную msg
var layer = document.getElementById("runstr"); // Опеределили слой, где бегущая строка
function ScrollMessage() {
newtext = msg.substring(0, pos); //Кусок текста от 0 до pos записали в переменную
layer.innerHTML=newtext; //Вводим текст в слой.
pos++; //Добавляем позицию.
if (pos > msg.length) { //Если позиция pos больше длины сообщения
pos = 0; //Позицию обнуляем
ident = setTimeout ("ScrollMessage()", 3000); //Перед тем как начать старое висит 3 секнды.
}
else
{
newint = Math.random()*120 //Случайный промежуток времени 1000 = 1 сек.
ident = setTimeout ("ScrollMessage()", newint + 120); // Задержка перед появлением следующего символа
}
}//Конец функции
ScrollMessage(); // Первый вызов функции
//-->
</script> В итоге всё будет выглядеть так:
| Оператор | Назначение |
|---|---|
| var | Объявление переменной. На самом деле их можно не объявлять, но по привычке я это сделал. Точно так же по привычке я ставил ; в конце строки. |
| document.getElementById("id") | Не буду вдаваться в подробности структуры документа, короче так мы обращаемся к элементу с определённым id, в нашем случае - это runstr |
| string.substring(нач., конеч.) | Функция, которая выделяет из строки подстроку. Причём начало подстроки в строке определяется нач. позицией и кол-во позицией. |
layer.innerHTML=текст |
В выбранный нами элемент страницы вставляет текст (удаляя старый) |
| ++ | Оператор инкремента. Можно заменить на переменная = переменная + 1 |
setTimeout(действие, задержка) |
Вызывает временную задержку в задержка /1000 секунд и после выполняет указанное действие |
| Math.random()*конеч. | Генирирует случайное число от 0 до конеч. |
Что здесь может быть непонятно? Смутить может то, что не используется оператор цикла. Но так мне кажется нагляднее, пусть противоречит правилам структурного программирования, но… В следующий раз усовершенствуем наш скрипт так что бы выводилось не одно и то же сообщение, а разные. [читать продолжение]