Изменения фона элемента страницы с помощью JQuery

Категория: jQuery.

1377799-3217005В данном примере я покажу вам еще один интересный инструмент Jquery, это плагин backgroundPosition.

В качестве примера мы создадим анимированное меню с разными эффектами смены фона кнопок.
Конечно у кого-то это может вызвать вопрос зачем писать сценарии для смены фона, если это можно просто реализовать на CSS, теперь у Вас будет возможность сравнить возможности и увидеть преимущества JQuery.

k_prim2-6147367

И так подключаем библиотеку JQuery и плагин backgroundPosition.

Вставьте между тегами


Теперь HTML код наших пяти образцов меню, это обычные маркировочные списки которым присвоен свой ID.

  • Кнопка- 1
  • Кнопка- 2
  • Кнопка- 3
  • Кнопка- 4
  • Кнопка- 5


  • Кнопка- 1
  • Кнопка- 2
  • Кнопка- 3
  • Кнопка- 4
  • Кнопка- 5


  • Кнопка- 1
  • Кнопка- 2
  • Кнопка- 3
  • Кнопка- 4
  • Кнопка- 5


  • Кнопка- 1
  • Кнопка- 2
  • Кнопка- 3
  • Кнопка- 4
  • Кнопка- 5


  • Кнопка- 1
  • Кнопка- 2
  • Кнопка- 3
  • Кнопка- 4
  • Кнопка- 5
 

CSS


h2 {padding-top:20px;clear:both;}
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}
li a {background:url(bg2.jpg) repeat 0 0;}
#ex1 a {background:url(bg.jpg) repeat -20px 35px;}
#ex2 a {background:url(bg2.jpg) repeat 0 0;}
#ex3 a {background:url(bg3.jpg) repeat 0 0;}
#ex4 a {background:url(bg4.jpg) repeat 0 0;}
#ex5 a {background:url(bg4.jpg) repeat 0 0;}

Код JQuery


$(function(){
$('#ex1 a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#ex2 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#ex3 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#ex4 a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})

$('#ex5 a')
.css( {backgroundPosition: "0 0"} )
.click(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:200})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});

Необходимые изоброжения в архиве с исходником.

Исходник:
k_ck-9358691

{reg} просмотреть здесь длжна быть ссылка {/reg} {pub}Ссылка доступна только для зарегистрированных пользователей!

{/pub}