На этом шаге мы рассмотрим изменение внешнего вида страницы.
Теперь, когда у нас имеется галерея изображений, пригодная к использованию без поддержки JavaScript, нам необходимо изменить некоторые детали. Полоса прокрутки станет ненужной, когда мы реализуем свой собственный механизм прокрутки, а автоматическое размещение изображений, реализованное с помощью свойства float, будет мешать, когда нам потребуется позиционировать изображения в ходе воспроизведения анимационного эффекта. Поэтому в первую очередь мы переопределим некоторые стили:
$(document).ready(function() {
var spacing = 140;
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
}).find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});
var $covers = $('#featured-books .covers a');
$covers.eq(0).css('left', 0);
$covers.eq(1).css('left', spacing);
$covers.eq(2).css('left', spacing * 2);
});
Переменная spacing пригодится нам во многих вычислениях. Она хранит ширину одного изображения обложки плюс отступы с обеих сторон. Так как теперь отпала необходимость в выделении пространства для полосы прокрутки, свойство width элемента-контейнера может быть установлено в значение, в точности соответствующее суммарной ширине трех изображений. В действительности же мы изменили значение свойства overflow на hidden, и прощай полоса прокрутки.
Все изображения обложки позиционируются абсолютно и изначально имеют левую координату со значением 1000. Благодаря этому они оказываются за пределами области видимости. Затем мы по одному перемещаем первые три изображения в соответствующие позиции. Переменная $covers, хранящая все якорные элементы, также пригодится нам позднее.
Теперь видимы первые три изображения, при этом механизм прокрутки отсутствует, как показано на рисунке 1.
Рис.1. Видимы первые три изображения, при этом механизм прокрутки отсутствует
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим прокрутку изображений щелчком мыши.
