jquery обзор плагинов

Источник

• jQuery Blend

Скачать

Примеры

• Подсветка пунктов меню

Описание

Плагин jQuery Blend использует ту же технологию, что и плагин для изменения цвета ссылок. Блок, для которого задана фоновая картинка с подсветкой, располагается поверх пункта меню и при наведении на пункт меняется прозрачность перекрывающего блока.

Для работы плагина jQuery Blend потребуется заготовка такого вида:

Верхний ряд – неактивные пункты меню, нижний ряд – пункты меню при наведении курсора

Установка

Подключите jQuery и плагин

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.blend.js"></script>

Необходимо прописать в CSS положение фоновых картинок для обычного состояния пункта и состояния при наведении мыши. Помимо состояния :hover нужно указать дополнительный селектор через класс .hover. Стили с демонстрационной страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.demo a{
   display:block;
   text-indent:-9999px;
   width:90px;
   height:46px;
   margin-right:7px;
   float:left;
   background-image:url(nav-sprite.png);
   background-repeat:no-repeat;
   cursor:pointer;
}
 
#demo_home{background-position:0 0;}
#demo_home:hover,#demo_home.hover{background-position:0 -48px;}
 
#demo_blog{background-position:-90px 0;}
#demo_blog:hover,#demo_blog.hover{background-position:-90px -48px;}
 
#demo_demo{background-position:-180px 0;}
#demo_demo:hover,#demo_demo.hover{background-position:-180px -48px;}
 
#demo_about{background-position:-270px 0;}
#demo_about:hover,#demo_about.hover{background-position:-270px -48px;}
 
#demo_services{background-position:-360px 0;}
#demo_services:hover,#demo_services.hover{background-position:-360px -48px;}
 
#demo_contact{background-position:-450px 0;}
#demo_contact:hover,#demo_contact.hover{background-position:-450px -48px;}

Плагин работает со ссылками, поэтому при инициализации  селектор должен указывать на ссылку

1

$('ul#nav a').blend({speed:300});

Параметры

• параметр
  значение по умолчанию
  описание
• speed
  500
  Скорость эффекта в миллисекундах
• opacity
  1
  Начальное значение прозрачности
• target
  false
  Селектор jQuery который можно использовать для изменения элемента, для которого применен плагин
• pulse
  false
  При значение true анимация зацикливается (мигание)
• active
  false
  При true переводит в состояние ‘курсор наведен’
• top
  false
  При true блок для значения :hover будет перекрывать содержание
• reverse
  false
  При true меняются состояния: сначала пункты с подсветкой, а при наведении подсветка исчезает