На этом шаге мы рассмотрим создание функции прокрутки заголовков.

    Теперь все готово к воспроизведению эффекта прокрутки заголовков, дат и кратких описаний. Мы определим функцию, которая будет выполнять это действие, чтобы его можно было повторять, когда потребуется.

    Сначала позаботимся об обновлении значений переменных, используемых для отслеживания активного заголовка. Оператор деления по модулю (%) позволит легко организовать циклический обход списка заголовков. Всякий раз, когда будет вызываться наша функция, мы можем добавлять 1 к значению переменной currentHeadline, затем вычислять остаток от деления полученного результата на значение переменной headlineCount и тем самым определять допустимый порядковый номер следующего заголовка.

    Нам также необходимо обновить значение переменной oldHeadline, чтобы было проще манипулировать заголовком, покидающим область видимости.

      var headlineRotate = function() {
        currentHeadline = (oldHeadline + 1) % headlineCount;
        // Изменение позиции заголовка производится здесь. 
        oldHeadline = currentHeadline;
      };

    Теперь заполним промежуток программным кодом, выполняющим перемещение заголовков. Сначала добавим анимационный эффект, который перемещает старый заголовок за пределы области видимости. Затем вставим другой анимационный эффект, который будет передвигать в пределы области видимости новый заголовок.

      var headlineRotate = function() {
        currentHeadline = (oldHeadline + 1) % headlineCount;
        $('div.headline').eq(oldHeadline).animate(
          {top: -hiddenPosition}, 'slow', function() {
            $(this).css('top', hiddenPosition);
          });
        $('div.headline').eq(currentHeadline).animate(
          {top: 0}, 'slow', function() {
            pause = setTimeout(headlineRotate, 5000);
          });
        oldHeadline = currentHeadline;
      };

    В обоих случаях анимационный эффект основан на изменении свойства top элементов новостей. Напомним, что элементы скрыты, потому что их свойство top имеет значение hiddenPosition (которое больше высоты контейнера). Когда это свойство приобретает значение 0, элемент оказывается в области видимости. При дальнейшем изменении его до значения -hiddenPosition элемент снова выходит за область видимости.

    Кроме того, в обоих случаях мы определили функции обратного вызова, которые вызываются по завершении воспроизведения анимационного эффекта. Когда старый заголовок полностью покидает область видимости, его свойство top устанавливается в значение hiddenPosition, что обеспечивает его подготовку к отображению позднее. Когда завершится воспроизведение анимационного эффекта для нового заголовка, нам необходимо запустить следующий цикл смены заголовков. Делается это с помощью функции JavaScript setTimeout(), которая регистрирует указанную функцию для вызова через заданный интервал времени. В данном случае мы предусматриваем повторный вызов функции headlineRotate() через пять секунд (5000 миллисекунд).

    Сейчас у нас имеется замкнутый цикл операций; как только завершается один цикл воспроизведения анимационных эффектов, тут же выполняется подготовка к запуску следующего цикла. Нам осталось только вызвать функцию в самый первый раз; мы сделаем это с помощью еще одного вызова функции setTimeout(), благодаря которому первый цикл воспроизведения эффектов начнется через 5 секунд после получения рассылки RSS. Теперь у нас имеется работоспособная функция прокрутки.

$(document).ready(function() {
  $('#news-feed').each(function() {
    var $container = $(this);
    $container.empty();
    $.get('feed.xml', function(data) {
      $('rss item', data).each(function() {
        // Здесь выполняются действия с элементами новостей.
        var $link = $('<a></a>')
          .attr('href', $('link', this).text())
          .text($('title', this).text());
        var $headline = $('<h4></h4>').append($link);

        var pubDate = new Date($('pubDate', this).text());
        var pubMonth = pubDate.getMonth() + 1;
        var pubDay = pubDate.getDate(); 
        var pubYear = pubDate.getFullYear();
        var $publication = $('<div></div>')
          .addClass('publication-date')
          .text(pubMonth + '/' + pubDay + '/' + pubYear);
    
        var $summary = $('<div></div>')
          .addClass('summary')
          .html($('description', this).text());
        
        $('<div></div>')
          .addClass('headline')
          .append($headline, $publication, $summary)
          .appendTo($container);
      });

      var currentHeadline = 0, oldHeadline = 0;
      var hiddenPosition = $container.height() + 10;
      $('div.headline').eq(currentHeadline).css('top', 0);
      var headlineCount = $('div.headline').length;
      var pause;

      var headlineRotate = function() {
        currentHeadline = (oldHeadline + 1) % headlineCount;
        $('div.headline').eq(oldHeadline).animate(
          {top: -hiddenPosition}, 'slow', function() {
            $(this).css('top', hiddenPosition);
          });
        $('div.headline').eq(currentHeadline).animate(
          {top: 0}, 'slow', function() {
            pause = setTimeout(headlineRotate, 5000);
          });
        oldHeadline = currentHeadline;
      };
      pause = setTimeout(headlineRotate, 5000);
    }); 
  });
});

    В ходе воспроизведения анимационного эффекта можно наблюдать, как один заголовок постепенно исчезает за верхним краем, а следующий за ним появляется из-за нижнего края, как показано на рисунке 1.

Рис.1. Один заголовок постепенно исчезает за верхним краем, а другой появляется из-за нижнего края

    На следующем шаге мы рассмотрим приостановку при наведении указателя мыши.

Предыдущий шаг Содержание Следующий шаг