Прокрутчик

Теперь, когда вы знаете, как писать в строку состояния и как работают таймауты, мы разберём прокрутчики. Вы могли уже видеть бегущую строку в строке состояния. Она встречается практически везде в 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 миллисекунд. Текст перемещается на один шаг вперед и устанавливается другое время ожидания. Это продолжается бесконечно.

Прокрутчики широко используются в Internet. Есть риск, что они быстро станут непопулярными. Я должен признать, что мне они не слишком нравятся. Особенно раздражает на большинстве страниц то, что URL больше не может отображаться при перемещении указателя поверх ссылки. Это может решиться через остановку прокрутчика, когда событие MouseOver происходит – вы можете запустить его снова с onMouseOut. Если вам нужен прокрутчик, постарайтесь не использовать стандартый прокрутчик – попробуйте добавлять какой-нибудь изящный эффект. Например, одна часть текста перемещается слева а другая часть исходит справа – когда они встречаются в середине, текст останавливается на несколько секунд.

Wiki-учебник по веб-технологиям: JavaScript/Прокрутчик ...

Прокрутчик