В основе любого алгоритма, создающего эффект движения, л< мещение элемента на определенное количество пикселов, па" вторное выполнение операции до тех пор, пока элемент не д определенного местоположении. Эффект бегущей строки - это, луй, один из самых простых типов анимации - прямолинейное ние справа налево, пока правый край ленты новостей не дос вого края контейнера. Это ограничительное условие может б жено как -this, ticker, of fsetWidth. По достижении бегущей этой позиции движение возобновляется.
Работа метода tick() начинается со сбора необходимой инфор
NewsTicker.prototype.tick =.function (j {
var iTickerLength = -this.ticker.offsetWidth; . var oThis = this;
Переменная iTickerWidth содержит конечную точку движения: отрица¬тельное значение ширины элемента ticker (offsetWidth). Затем в пере¬менную oThis заносится значение ссылки this.
Эффект движения будет создаваться за счет повторных вызовов функ¬ции через короткие интервалы времени. В данном случае эта функция располагается внутри метода tick():
Мы могли бы реализовать анимацию с помощью внешних переменных, функций или методов, но такой подход был бы не таким объектно-ори¬ентированным. Размещение логики анимации внутри метода tick() де¬лает виджет проще и облегчает его распространение и поддержку.
На первом шаге необходимо определить, содержит ли лента новостей какие-либо данные, поскольку не имеет смысла прокручивать пустой элемент :
if (this.ticker.innerHTML) {

Этот фрагмент проверяет свойство innerHTML элемента. Если это свойст¬во не пустое, значит, какие-то данные существуют и необходимо на¬чать движение:
if (this.ticker.innerHTML) {
if (this.ticker.offsetLeft > iTickerLength) { var iNewLeft = this.ticker.offsetLeft - 1; this.ticker.style.left = iNewLeft + "px";

Добавленный фрагмент кода выполняет перемещение бегущей строки. В первой строке проверяется, не достигнута ли конечная точка движе¬ния (iTickerLength). Если текущая позиция бегущей строки больше значения переменной, то движение может быть продолжено. В сле¬дующей строке вычисляется новая позиция бегущей строки - левее те¬кущей на один пиксел. В последней строке выделенного фрагмента бе¬гущая строка перемещается в новую позицию в соответствии со значе¬нием переменной iNewLeft. Однако на этом реализация алгоритма дви¬жения не заканчивается. Бегущая строка движется до тех пор, пока не достигнет конечной точки, после чего ее надо возвратить в начальное положение:
NewsTicker.prototype.tick = function () {
var iTickerLength = this.ticker.offsetWidth; var oThis = this;
var doSetTimeout oThis.tickO;
};
functionQ {

if (this.ticker,innerHTML) {
if (this.ticker.offsetLeft > -iTickerLength) {
var iNewLeft = this.ticker.offsetLeft - 1;
this.ticker.style.left's iNewLeft + "px"; } else {
this.ticker.style.left = this.tickerContainer.offsetWidth +3 this.timer = setTimeout(doSetTimeout,1);
>;
Эту задачу решает первый блок добавленного кода. По достня нечной точки движения бегущая строка снова перемещается на правую позицию. В заключительной строке устанавлива мер вызова функции doSetTimeout (), определенной внутри метода* Таким образом, метод tick() будет вызываться каждую миллис до тех пор, пока таймер не будет сброшен (это произойдет, когд зователь наведет указатель мыши на ленту новостей).