Прокрутчик

Теперь, когда Вы знаете, как писать в строку состояния и как работают таймауты, мы разберём прокрутчики. Вы могли уже видеть бегущую строку в строке состояния. Она встречается практически везде в Internet. Мы увидим, как пишется простейший прокрутчик. Помимо этого мы подумаем о возможных усовершенствованиях прокрутчика.
Прокрутчик очень просто выполняется. Давайте подумаем, над тем, как мы могли реализовать перемещающийся текст в строке состояния. Мы должны записать текст в стоку состояния. После короткого промежутка времени мы должны писать тот же самый текст в стоку состояния - но мы должны переместить его немного влево. Если мы повторим это несколько раз, пользователь получит впечатление бегущей стоки.
Мы должны подумать относительно того, как мы можем определить, которая часть текста должна отображаться, поскольку весь текст обычно длиннее чем строки состояния.

Эта кнопка открывает новое окно и отображать прокрутчик:

Вот исходный текст - я добавил некоторые комментарии:

<html> <head> <script language="JavaScript"> <!-- hide // define the text of the scroller var scrtxt = "This is JavaScript! " + "This is JavaScript! " + "This is JavaScript!"; var length = scrtxt.length; var width = 100; var pos = -(width + 2); function scroll() { // display the text at the right position and set a timeout // move the position one step further pos++; // calculate the text which shall be displayed var scroller = ""; if (pos == length) { pos = -(width + 2); } // if the text hasn't reached the left side yet we have to // add some spaces - otherwise we have to cut of the first // part of the text (which moved already across the left border if (pos < 0) { for (var i = 1; i <= Math.abs(pos); i++) { scroller = scroller + " ";} scroller = scroller + scrtxt.substring(0, width - i + 1); } else { scroller = scroller + scrtxt.substring(pos, width + pos); } // assign the text to the statusbar window.status = scroller; // call this function again after 100 milliseconds setTimeout("scroll()", 100); }

// --> </script> </head> <body onLoad="scroll()"> Your HTML-page goes here. </body> </html>

Основная часть функции scroll() необходима для вычисления, какая часть текста отображается. Я не объясняю код подробно - Вы только должны понять, как этот прокрутчик работает вообще.
Чтобы запустить прокрутчик, мы используем обработчик события onLoad тега <body>. Это означает, что функция scroll() будет вызываться сразу после загрузки HTML-страницы.
Мы вызываем функцию scroll() с помощью свойства onLoad. Первый шаг прокрутчика - вычисление и отображение. В конце функции scroll() мы устанавливаем время ожидания (таймаут). Это заставляет функцию scroll() выполняться снова после 100 миллисекунд. Текст перемещается на один шаг вперед и устанавливается другое время ожидания. Это продолжается бесконечно.
(Имелись некоторые проблемы с этим видом прокрутчика в Netscape Navigator 2.x. . Это иногда вызывало ошибку 'Out of memory'. Я получил много писем, объясняющие это как рекурсивное обращение к функции scroll() - в заключение ведущие к переполнению памяти. Но это не правда. Это не рекурсивное обращение к функции! Мы получаем рекурсию, если мы вызываем функцию scroll()непосредственно из функции scroll(). Но это не то, что мы делаем здесь. Старая функция, которая устанавливает время ожидания, заканчивается прежде, чем новая функция выполняется. Проблема состояла в том, что строки действительно не могли быть изменены в JavaScript. Если Вы пробовали делать это, JavaScript просто создал новый объект - без того, чтобы удалить старый. Это и заполняло память.)
Прокрутчики широко используются в Internet. Есть риск, что они быстро станут непопулярными. Я должен признать, что мне они не слишком нравятся. Особенно раздражает на большинстве страниц то, что URL больше не может отображаться при перемещении указателя поверх ссылки. Это может решиться через остановку прокрутчика, когда событие MouseOver происходит - Вы можете запустить его снова с onMouseOut. Если Вам нужен прокрутчик, постарайтесь не использовать стандартый прокрутчик - попробуйте добавлять какой-нибудь изящный эффект. Например, одна часть текста перемещается слева а другая часть исходит справа - когда они встречаются в середине, текст останавливается на несколько секунд. С некоторой долей фантазии Вы можете найти хорошие варианты (некоторые примеры есть в моей книге).

Содержание раздела