Часть 1. jQuery и красивые девушки

Опубликовано admin - чт, 04/21/2011 - 09:35

Название не говорит, что девушкам здесь читать нечего. Вы можете заменить их любыми для Вас подходящими изображениями. Мы будем создавать в статье мини - презентацию, состоящую из трёх элементов списка с фоновым изображением, которое будет сменятся при наведении курсора на меню. Сменятся изображения будут с различным интервалом времени, для обеспечения определенного зрительного эффекта, что несомненно сделает Ваши страницы запоминающимися и привлекательными. Как ни странно, данный слайдер поддерживается Internet Explorer 6 и выше, конечно, все нормальные браузеры так же поддерживают его полностью.

  • Google Chrome 9+
  • Opera 10.5+
  • Firefox 4+
  • Safari 3.2+
  • Internet Explorer 6 +

Почему именно этот слайдер я решил разобрать и научить Вас его создавать? Потому что он больше всего подходит для создания быстрых страниц презентаций или сайтов визиток, что может облегчить работу начинающим разработчикам и сократить время на разработку более опытным. Начнём с HTML структуры.

HTML структура

Суть в HTML такова - у нас есть контейнер с id menuWrapper", внутри которого есть три элемента списка - контейнеры (это элементы с id "bg1"), внутри которых расположены списки и ссылки. Каждый контейнер отображают фоновое изображение. С наведением курсора на ссылку, изображение будет плавно перемещаться за счет изменения свойства background-position (для этого используется плагин jquery.bgpos.js).

Три элемента - контейнера располагаются внутри общего для всех элементов контейнера - с id "menuWrapper". Его высота должна и ширина должны соответствовать размерам фоновым изображений, у нас это 500 и 339 пикселей. В общем css код не представляет больших сложностей для понимания. Ниже вы можете видеть его полностью.

CSS

jQuery

Давайте лучше разберём подробней jQuery, он очень хорошо написан. Сначала я приведу его полностью, а ниже – разберу подробней, - по каждой строчке.

В первой строчке главный сниппет jQuery, я в предыдущей статье о jQuery сниппетах указывал его в полном варианте, здесь он в сокращенном. С его использованием нам станут доступны все элементы на странице для манипуляции, в том числе и элементы нашего меню - слайдера.

После мы объявляем две переменные - var current и var loaded. Первая содержит индекс активного элемента – элемента, по которому провели курсором, а вторая содержит количество загруженных изображений.

Когда я начинал изучать jQuery для меня было страшным смотреть на эти строчки, сейчас я понимаю, что это такое и для чего нужно, мы здесь загружаем на страницу объекты изображений в количестве трёх штук (у нас три элемента списка). Зачем загружать? Это нужно для того чтобы при манипуляции с элементами изображения уже были подгружены на страницу, мы их возьмём из кэша, представьте, если бы они не были подгружены, то пользователь сперва при первых манипуляциях ждал бы их полной загрузки, а затем они бы брались из кэша, что для нас неприемлемо, нам нужно чтобы изображения были подгружены до того как пользователь начнёт манипуляции со слайдером.

После мы можем подсчитать количество загруженных изображений и привязать наш обработчик события mouseover.

В следующих строчках мы сверяем текущий объект со значением переменной, если индекс текущего элемента и значение переменной совпадают, то мы не производим ни каких манипуляций, а просто возвращаем return.

В ином случае мы должны запустить наш код, чтобы фоновое изображение перемещалось, для этого передаём в переменную item текущий id, он нам пригодится для функции menu, о которой позже, так же он пригодится для установки класса для элемента li.

Но до того как начнётся выполнение функции menu мы должны назначить всем 3 элементам li класс с тем фоновым изображением которое привязано к id ссылки, нужно это для того чтобы в функции menu каждый раз менять новое фоновое изображение с эффектами анимации:

Вы уже встретили несколько функции menu, - это функция перемещающая фоновое изображение для трёх элементов li:

Вкратце можно объяснить функцию menu следующим образом. C 82 по 84 строку мы смещаем фоновое изображение для каждого элемента с заданной скоростью и заданным значением смещения, то есть для первого li мы передвигаем фоновое изображение к «0», для второго к –«166px», для третьего к –«332px». В этом и заключается эффект анимации нашего слайдера. Помните, что эффекты создаются благодаря плагину jQuery Background Position( Alexander Farkas).

В итоге вы можете увидеть кроссбраузерный результат (Google Chrome, Firefox, Opera, Safari, IE8, IE7):

Часть 2. Большие девушки!

Вы сможете сами создавать свои слайдеры, однако, давайте расмотрим пример с увеличением изображения до 800px, который более реален для для сайта визитки, ничего сложного в этом нет просто изменим размеры фото, чтобы их ширина для всех трёх стала равной 800px, а высота 542px. Изменили в фотошопе, тепереь давайте внесём изменения в html, css и js.

Затем замените строку ...

Затем замените строку ...

Затем замените строку ...

В css для тех же элементов замените высоту и ширину, а так же отступ от верха для ссылок.

Для jQuery нужно изменить следующие строки листинга 3 (он выше находится):

Вот на этом всё! Смотрите, что мы имеем по адресу: Лучше посмотреть в новом окне.

Заключение

Теперь Вы можете создавать собственные красивые и эффективные слайдеры благодаря Mary Lou и моему уроку.

На разработку сайта! Скидки до 20%!