Шаг 198.
Библиотека jQuery. Прокрутка и перемещение. Прокрутка заголовков. Подготовка к выполнению прокрутки

    На этом шаге мы рассмотрим определение переменных, которые будут использоваться при прокрутке.

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

      var currentHeadline = 0, oldHeadline = 0;

    Затем следует побеспокоиться о начальном позиционировании заголовков. Напомним, что в таблице стилей мы уже установили свойство top заголовков в значение, на 10 пикселей превышающее значение свойства height контейнера, а так как свойство overflow контейнера имеет значение hidden, изначально заголовки не отображаются. Если сохранить начальное значение для данного свойства в переменной, позднее нам проще будет перемещать заголовки в эту позицию.

      var hiddenPosition = $container.height() + 10;

    Кроме того, нам необходимо, чтобы первый заголовок отображался сразу же после первоначальной загрузки страницы. Для этого мы можем установить свойство top равным 0.

      $('div.headline').eq(currentHeadline).css('top', 0);

    Теперь область прокрутки на странице находится в требуемом начальном состоянии, как показано на рисунке 1.

Рис.1. Область прокрутки находится в требуемом начальном состоянии

Полный текст этого примера можно взять здесь.

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

      var headlineCount = $('div.headline').length;
      var pause;

    В данный момент нет необходимости определять значение переменной pause - оно будет устанавливаться всякий раз перед сменой заголовка. Однако мы всегда должны объявлять локальные переменные с помощью ключевого слова var, чтобы избежать опасности конфликта имен с глобальными переменными.

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




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