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

jQuery и CSS

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

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

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

HTML структура

  • Код
  • Чистый код
  1. <div id="menuWrapper" class="menuWrapper bg1">
  2. <ul class="menu" id="menu">
  3. <li class="bg1" style="background-position:0 0;">
  4. <a id="bg1" href="#">jQuery</a>
  5. <ul class="sub1" style="background-position:0 0;">
  6. <li><a href="#">Это фреймовик</a></li>
  7. <li><a href="#">Это простота</a></li>
  8. <li><a href="#">Это скорость</a></li>
  9. </ul>
10. </li>
11. <li class="bg1" style="background-position:-166px 0px;">
12. <a id="bg2" href="#">slyweb.ru</a>
13. <ul class="sub2" style="background-position:-166px 0;">
14. <li><a href="#">Руководство jQuery</a></li>
15. <li><a href="#">Статьи</a></li>
16. <li><a href="#">Разработки</a></li>
17. </ul>
18. </li>
19. <li class="last bg1" style="background-position:-332px 0px;">
20. <a id="bg3" href="#">Контакты</a>
21. <ul class="sub3" style="background-position:-166px 0;">
22. <li><a href="#">Заказ услуг</a></li>
23. <li><a href="#">Связь</a></li>
24. <li><a href="#">и многое другое</a></li>
25. </ul>
26. </li>
27. </ul>
28. </div>
29.

        
Листинг 1.

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

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

CSS

  • Код
  • Чистый код
  1..menuWrapper{
  2. font-family: "Trebuchet MS", Arial, sans-serif;
  3. font-size: 15px;
  4. font-style: normal;
  5. font-weight: normal;
  6. text-transform:uppercase;
  7. letter-spacing: normal;
  8. line-height: 1.45em;
  9. position:relative;
10. margin:20px auto;
11. height:339px;
12. width:497px;
13. background-position:0 0;
14. background-repeat:no-repeat;
15. background-color:transparent;
16. -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
17. border: 1px solid #B2B2B2;
18. background-color: #B2B2B2;
19.}
20.ul.menu{
21. list-style:none;
22. width:497px;
23. margin: 0;
24. padding: 0;
25.}
26.ul.menu > li{
27. float:left;
28. width:165px;
29. height:339px;
30. border-right:1px solid #777;
31. background-repeat:no-repeat;
32. background-color:transparent;
33.}
34.ul.menu > li.last{
35. border:none;
36.}
37..bg1{
38. background-image: url(../images/1.jpg);
39.}
40..bg2{
41. background-image: url(../images/2.jpg);
42.}
43..bg3{
44. background-image: url(../images/3.jpg);
45.}
46.ul.menu > li > a{
47. float:left;
48. width:165px;
49. height:50px;
50. margin-top:250px;
51. text-align:center;
52. line-height:50px;
53. color:#ddd;
54. background-color:#333;
55. letter-spacing:1px;
56. cursor:pointer;
57. text-decoration:none;
58. text-shadow:0px 0px 1px #fff;
59.}
60.ul.menu > li ul{
61. list-style:none;
62. float:left;
63. margin-top:-161px;
64. width:100%;
65. height:111px;
66.
67. background-repeat:no-repeat;
68. background-color:transparent;
69. margin-left: 0;
70. padding-left: 0;
71.
72.}
73.ul.menu > li ul li{
74. display:none;
75.
76.}
77.ul.menu > li ul.sub1{
78. background-image:url(../images/bg1sub.png);
79.
80.}
81.ul.menu > li ul.sub2{
82. background-image:url(../images/bg2sub.png);
83.}
84.ul.menu > li ul.sub3{
85. background-image:url(../images/bg3sub.png);
86.}
87.ul.menu > li ul li a{
88. color:#fff;
89. text-decoration:none;
90. line-height:30px;
91. margin-left:20px;
92. text-shadow:1px 1px 1px #444;
93. font-size:11px;
94.}
95.ul.menu > li ul.sub1 li{
96. display:block;
97.}
98.ul.menu > li ul li a:hover{
99. border-bottom:1px dotted #fff;
100.}
101.

        
Листинг 2.

jQuery

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

  • Код
  • Чистый код
  1. $(function() {
  2. /* позиция активного <li> */
  3. var current = 0;
  4.
  5. var loaded = 0;
  6. for(var i = 1; i <4; ++i)
  7. $('<img />').load(function(){
  8. ++loaded;
  9. if(loaded == 3){
10. $('#bg1,#bg2,#bg3').mouseover(function(e){
11.
12. var $this = $(this);
13. /* если текущий элемент выбран и мы снова навели курсор на него */
14. if($this.parent().index() == current)
15. return;
16.
17. /* в ином случае мы сохраняем текущий id в item
18. (он будет bg1 или bg2 или bg3, в зависимости от активного элемента */
19. var item = e.target.id;
20.
21. /*
22. суб меню
23. перемещаемся с лева на право если элемент суб меню первый или последний,
24. иначе справа на лево right->left
25. */
26.
27. if(item == 'bg1' || current == 2)
28. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
29. $(this).find('li').hide();
30. });
31. else
32. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
33. $(this).find('li').hide();
34. });
35.
36. if(item == 'bg1' || current == 2){
37. /* перемещаемся с лева на право если элемент суб меню первый или последний,
38. иначе справа на лево right->left */
39. $('#menu > li').animate({backgroundPosition:"(-500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
40. move(1,item);
41. }
42. else{
43. /* перемещаемся с лева на право если элемент суб меню первый или последний,
44. иначе справа на лево right->left */
45. $('#menu > li').animate({backgroundPosition:"(500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
46. move(0,item);
47. }
48.
49. /*
50. среднее суб меню то же должно пермещаться если мы переходим от крайних суб-меню,
51. движение будет слева на право или наоборот, в зависимости от суб - меню от
52. которого мы перемещаемся
53. */
54.
55. if(current == 2 && item == 'bg1'){
56. $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-166px 0)"},300);
57. }
58. if(current == 0 && item == 'bg3'){
59. $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(166px 0)"},300);
60. }
61.
62.
63. /* получаем текущий индекс родительского элемента для ссылки над котрой сработало событие mouseover */
64. current = $this.parent().index();
65.
66. /* отображаем текст суб меню и li элементы суб меню */
67.
68. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
69. $(this).find('li').fadeIn();
70. });
71. });
72. }
73. }).attr('src', 'images/'+i+'.jpg');
74.
75.
76. /*
77. если dir:1 - то движение слева на право
78. если dir:0 - то движение справа на лево
79. */
80. function move(dir,item){
81. if(dir){
82. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
83. $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
84. $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
85. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
86. });
87. }
88. else{
89. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
90. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
91. });
92. $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
93. $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},200);
94. }
95. }
96. });
97.

        
Листинг 3.

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

  • Код
  • Чистый код
  1. $(function() {
  2.
  3.

        

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

  • Код
  • Чистый код
  1. var current = 0;
  2.
  3. var loaded = 0;
  4.

        

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

  • Код
  • Чистый код
  1.for(var i = 1; i <3; ++i)
  2. $('<img />').load(function(){
  3.
  4. .....
  5.
  6. }).attr('src', 'images/'+i+'.jpg');
  7.

        

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

  • Код
  • Чистый код
  1. ++loaded;
  2. if(loaded == 3){
  3. $('#bg1,#bg2,#bg3').mouseover(function(e){
  4.

        

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

  • Код
  • Чистый код
  1.var $this = $(this);
  2. /* если текущий элемент выбран и мы снова навели курсор на него */
  3. if($this.parent().index() == current)
  4. return;
  5.

        

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

  • Код
  • Чистый код
  1.var item = e.target.id;
  2.

        

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

  • Код
  • Чистый код
  1. if(item == 'bg1' || current == 2)
  2. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
  3. $(this).find('li').hide();
  4. });
  5. else
  6. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
  7. $(this).find('li').hide();
  8. });
  9. if(item == 'bg1' || current == 2){
10. /* перемещаемся с лева на право если элемент суб меню первый или последний,
11. иначе справа на лево right->left */
12. $('#menu > li').animate({backgroundPosition:"(-500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
13. move(1,item);
14. }
15. else{
16. /* перемещаемся с лева на право если элемент суб меню первый или последний,
17. иначе справа на лево right->left */
18. $('#menu > li').animate({backgroundPosition:"(500px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
19. move(0,item);
20. }
21. /*
22. среднее суб меню то же должно пермещаться если мы переходим от крайних суб-меню,
23. движение будет слева на право или наоборот, в зависимости от суб - меню от
24. которого мы перемещаемся
25. */
26.
27. if(current == 2 && item == 'bg1'){
28. $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-166px 0)"},300);
29. }
30. if(current == 0 && item == 'bg3'){
31. $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(166px 0)"},300);
32. }
33.
34. /* получаем текущий индекс родительского элемента для ссылки над котрой сработало событие mouseover */
35. current = $this.parent().index();
36.
37. /* отображаем текст суб меню и li элементы суб меню */
38.
39. $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
40. $(this).find('li').fadeIn();
41. });
42.

        

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

  • Код
  • Чистый код
  1. /*
  2. если dir:1 - то движение слева на право
  3. если dir:0 - то движение справа на лево
  4. */
  5. function move(dir,item){
  6. if(dir){
  7. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
  8. $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
  9. $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
10. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
11. });
12. }
13. else{
14. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
15. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
16. });
17. $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
18. $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},200);
19. }
20. }
21.

        

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

  • Код
  • Чистый код
  1. $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
  2. $('#bg2').parent().stop().animate({backgroundPosition:"(-166px 0)"},300);
  3. $('#bg3').parent().stop().animate({backgroundPosition:"(-332px 0)"},400,function(){
  4. $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
  5. });
  6.

        

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

Загрузить архивом "Слайдер на jQuery с уменьшенными изображениями".

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

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

Изменения, в основном коснутся увеличения ширины и высоты элементов li.

  • Код
  • Чистый код
  1. <li class="bg1" style="background-position:-166px 0px;">
  2.

        

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

  • Код
  • Чистый код
  1. <ul class="sub2" style="background-position:-266px 0;">
  2.

        

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

  • Код
  • Чистый код
  1. <li class="last bg1" style="background-position:-532px 0px;">
  2.

        

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

  • Код
  • Чистый код
  1. <ul class="sub3" style="background-position:-266px 0;">
  2.

        

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

  • Код
  • Чистый код
  1. .menuWrapper{
  2. font-family: "Trebuchet MS", Arial, sans-serif;
  3. font-size: 15px;
  4. font-style: normal;
  5. font-weight: normal;
  6. text-transform:uppercase;
  7. letter-spacing: normal;
  8. line-height: 1.45em;
  9. position:relative;
10. margin:20px auto;
11. height:542px;
12. width:797px;
13. background-position:0 0;
14. background-repeat:no-repeat;
15. background-color:transparent;
16.}
17.ul.menu{
18. list-style:none;
19. width:797px;
20.}
21.ul.menu > li{
22. float:left;
23. width:265px;
24. height:542px;
25. border-right:1px solid #777;
26. background-repeat:no-repeat;
27. background-color:transparent;
28.}
29.ul.menu > li.last{
30. border:none;
31.}
32..bg1{
33. background-image: url(../images/1.jpg);
34.}
35..bg2{
36. background-image: url(../images/2.jpg);
37.}
38..bg3{
39. background-image: url(../images/3.jpg);
40.}
41.ul.menu > li > a{
42. float:left;
43. width:265px;
44. height:50px;
45. margin-top:450px;
46. text-align:center;
47. line-height:50px;
48. color:#ddd;
49. background-color:#333;
50. letter-spacing:1px;
51. cursor:pointer;
52. text-decoration:none;
53. text-shadow:0px 0px 1px #fff;
54.}
55.ul.menu > li ul{
56. list-style:none;
57. float:left;
58. margin-top:-180px;
59. width:100%;
60. height:110px;
61. padding-top:20px;
62. background-repeat:no-repeat;
63. background-color:transparent;
64.}
65.ul.menu > li ul li{
66. display:none;
67.}
68.ul.menu > li ul.sub1{
69. background-image:url(../images/bg1sub.png);
70.}
71.ul.menu > li ul.sub2{
72. background-image:url(../images/bg2sub.png);
73.}
74.ul.menu > li ul.sub3{
75. background-image:url(../images/bg3sub.png);
76.}
77.ul.menu > li ul li a{
78. color:#fff;
79. text-decoration:none;
80. line-height:30px;
81. margin-left:20px;
82. text-shadow:1px 1px 1px #444;
83. font-size:11px;
84.}
85.ul.menu > li ul.sub1 li{
86. display:block;
87.}
88.ul.menu > li ul li a:hover{
89. border-bottom:1px dotted #fff;
90.}
91.

        

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

  • Код
  • Чистый код
27.$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
28. $(this).find('li').hide();
29.});
  ....
32.$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
33. $(this).find('li').hide();
34 });
....
39.$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
....
45.$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
.....
55.if(current == 2 && item == 'bg1'){
56.$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
57.}
58.if(current == 0 && item == 'bg3'){
59.$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
60.}
.....
82.$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
83.$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
84.$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
85.$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
86.});
...
89.$('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
90.$('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
91.});
92.$('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
93.$('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
...

        

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

Загрузить архивом "Слайдер на jQuery с увеличенными изображениями".

Заключение

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


Александр Ермаков