Категория: jQuery.
В данном примере я покажу вам еще один интересный инструмент Jquery, это плагин backgroundPosition.
В качестве примера мы создадим анимированное меню с разными эффектами смены фона кнопок.
Конечно у кого-то это может вызвать вопрос зачем писать сценарии для смены фона, если это можно просто реализовать на CSS, теперь у Вас будет возможность сравнить возможности и увидеть преимущества JQuery.
И так подключаем библиотеку 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})
})
});
Необходимые изоброжения в архиве с исходником.
Исходник:
{reg} просмотреть здесь длжна быть ссылка {/reg} {pub}Ссылка доступна только для зарегистрированных пользователей!
{/pub}