На этом шаге мы приведем окончательную версию приложения.
В этих шагах была представлена лишь малая часть возможностей по динамическому отображению информации с использованием анимированных изображений и приемов прокрутки текста. Ниже приводится полная реализация карусели изображений:
$(document).ready(function() { var spacing = 140; function createControl(src) { return $('<img/>') .attr('src', src) .addClass('control') .css('opacity', 0.6) .css('display', 'none'); } var $leftRollover = createControl('images/left.gif'); var $rightRollover = createControl('images/right.gif'); var $enlargeRollover = createControl('images/enlarge.gif'); var $enlargedCover = $('<img/>') .addClass('enlarged') .hide() .appendTo('body'); var $closeButton = createControl('images/close.gif') .addClass('enlarged-control') .appendTo('body'); var $priceBadge = $('<div/>') .addClass('enlarged-price') .css('opacity', 0.6) .css('display', 'none') .appendTo('body'); var $waitThrobber = $('<img/>') .attr('src', 'images/wait.gif') .addClass('control') .css('z-index', 4) .hide(); $('#featured-books').css({ 'width': spacing * 3, 'height': '166px', 'overflow': 'hidden' }).find('.covers a').css({ 'float': 'none', 'position': 'absolute', 'left': 1000 }); var setUpCovers = function() { var $covers = $('#featured-books .covers a'); $covers.unbind('click mouseenter mouseleave'); // Левое изображение - сдвинуть вправо // (чтобы просмотреть изображения слева). $covers.eq(0) .css('left', 0) .click(function(event) { $covers.eq(0).animate({'left': spacing}, 'fast'); $covers.eq(1).animate({'left': spacing * 2}, 'fast'); $covers.eq(2).animate({'left': spacing * 3}, 'fast'); $covers.eq($covers.length - 1) .css('left', -spacing) .animate({'left': 0}, 'fast', function() { $(this).prependTo('#featured-books .covers'); setUpCovers(); }); event.preventDefault(); }).hover(function() { $leftRollover.appendTo(this).show(); }, function() { $leftRollover.hide(); }); // Правое изображение - сдвинуть влево // (чтобы просмотреть изображения справа). $covers.eq(2) .css('left', spacing * 2) .click(function(event) { $covers.eq(0) .animate({'left': -spacing}, 'fast', function() { $(this).appendTo('#featured-books .covers'); setUpCovers(); }); $covers.eq(1).animate({'left': 0}, 'fast'); $covers.eq(2).animate({'left': spacing}, 'fast'); $covers.eq(3) .css('left', spacing * 3) .animate({'left': spacing * 2}, 'fast'); event.preventDefault(); }).hover(function() { $rightRollover.appendTo(this).show(); }, function() { $rightRollover.hide(); }); // Центральное изображение; увеличенная версия. $covers.eq(1) .css('left', spacing) .click(function(event) { $waitThrobber.appendTo(this).show(); alert('1'); var price = $(this).find('.price').text(); var startPos = $(this).offset(); startPos.width = $(this).width(); startPos.height = $(this).height(); var endPos = {}; endPos.width = startPos.width * 3; endPos.height = startPos.height * 3; endPos.top = 100; endPos.left = ($('body').width() - endPos.width) / 2; $enlargedCover.attr('src', $(this).attr('href')) .css(startPos) .show(); var performAnimation = function() { $waitThrobber.hide(); $enlargedCover.animate(endPos, 'normal', function() { $enlargedCover.one('click', function() { $closeButton.unbind('click').hide(); $priceBadge.hide(); $enlargedCover.fadeOut(); }); $closeButton .css({ 'left': endPos.left, 'top' : endPos.top }) .show() .click(function() { $enlargedCover.click(); }); $priceBadge .css({ 'right': endPos.left, 'top' : endPos.top }) .text(price) .show(); }); }; if ($enlargedCover[0].complete) { performAnimation(); } else { $enlargedCover.bind('load', performAnimation); } event.preventDefault(); }) .hover(function() { $enlargeRollover.appendTo(this).show(); }, function() { $enlargeRollover.hide(); }); }; setUpCovers(); });
Рис.1. Окончательная реализация
Полный текст этого примера можно взять здесь.Со следующего шага мы начнем рассматривать использование модулей расширения.