Позиционирование фона с помощью jQuery

В данном уроке рассказывается об использовании полезного плагина jQuery backgroundPosition. Он позволяет реализовывать различные дизайнерские идеи с помощью изменения фона.

demosourse

В качестве примера мы создадим анимированные кнопки с удобным интерфейсом, которые можно использовать в меню навигации по вебсайту.

Возникает вопрос, зачем нужен скрипт, если мы можем использовать эффект всплытия вместе со стилями CSS? Здесь есть возможность сравнить и убедиться в преимуществе решения с использованием JQuery.

Реализация очень проста:

Шаг 1. HTML

Здесь приведен исходный код для всех 5 примеров. Используется неупорядоченный список, все они похожи друг на друга, только имеют разные атрибуты ‘id’.

<ul id="ex1">
<li><a href="#">Кнопка 1</a></li>
<li><a href="#">Кнопка 2</a></li>
<li><a href="#">Кнопка 3</a></li>
<li><a href="#">Кнопка 4</a></li>
<li><a href="#">Кнопка 5</a></li>
</ul>
<ul id="ex2">
<li><a href="#">Кнопка 1</a></li>
<li><a href="#">Кнопка 2</a></li>
<li><a href="#">Кнопка 3</a></li>
<li><a href="#">Кнопка 4</a></li>
<li><a href="#">Кнопка 5</a></li>
</ul>
<ul id="ex3">
<li><a href="#">Кнопка 1</a></li>
<li><a href="#">Кнопка 2</a></li>
<li><a href="#">Кнопка 3</a></li>
<li><a href="#">Кнопка 4</a></li>
<li><a href="#">Кнопка 5</a></li>
</ul>
<ul id="ex4">
<li><a href="#">Кнопка 1</a></li>
<li><a href="#">Кнопка 2</a></li>
<li><a href="#">Кнопка 3</a></li>
<li><a href="#">Кнопка 4</a></li>
<li><a href="#">Кнопка 5</a></li>
</ul>
<ul id="ex5">
<li><a href="#">Кнопка 1</a></li>
<li><a href="#">Кнопка 2</a></li>
<li><a href="#">Кнопка 3</a></li>
<li><a href="#">Кнопка 4</a></li>
<li><a href="#">Кнопка 5</a></li>
</ul>

Шаг 2. CSS

<style type="text/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;}
</style>

Шаг 3. JQuery

<script type="text/javascript">
$(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})
})
});
</script>

Шаг 4. Изображения

Так же понадобятся несколько изображений:

bg
bg2
bg3
bg4

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com
Перевел: Сергей Фастунов
Урок создан: 10 Июля 2010
Просмотров: 29273
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^