Плагин Mobily Blocks JQuery

Плагин Mobily Blocks JQuery

02012-06-1624395Денис Абдуллин
Плагин, возможно, не самый полезный и важный, но, тем не менее, очень интересный. При наведении или нажатии (на ваше усмотрение) на элемент его плавно окружат другие элементы. Самым ярким примером использования плагина Mobily Blocks JQuery является кнопка «Share» для добавления страниц в закладки. Эффект по-настоящему красивый. На странице демо можно увидеть кнопку «Share». По нажатию появятся 6 кнопок социальных сетей.

Главный элемент, который запускает в ход другие, прописывается в CSS. Желательно брать круглые картинки одинакового размера, в CSS указывайте высоту и ширину.

Подключение JQuery и плагина Mobily Blocks (в секции HEAD)

Code
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyblocks.js" type="text/javascript"></script>


Код HTML

Code
<div class="blocks">
  <ul class="reset">
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <!-- и так далее -->
  </ul>  
</div>


Код JavaScript

Code
<script type="text/javascript">
  $('.blocks').mobilyblocks({
  trigger: 'hover', // click или hover
  direction: 'counter', // clockwise или counter
  duration:500, // скорость анимации
  zIndex:50, // значение z-index для li
  widthMultiplier:1.15
  });
</script>


Код CSS

Code
.blocks {
display:block;
width:32px; // ширина
height:32px; // длина
background:url('img/share.png') no-repeat;
cursor:pointer;
position:relative;
}

ul.reset,
ul.reset li {
  display:block;
  list-style:none;
  padding:0;
  margin:0;
}
   
ul.reset li {
  position:absolute;
}

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (5)
74NET 2012-06-16 в 17:50Спам
Весело
0
Гладнев Ярослав 2012-06-17 в 21:54Спам
Супер!
0
Гость 2012-06-18 в 07:26Спам
Красивая и нужная unerf :) Спасибо большое вам.
0
Гладнев Ярослав 2012-07-09 в 00:58Спам
У меня одного не ставится?((
0
Кирилл Масимор 2012-10-04 в 02:47Спам
Вот это штука прикольная порадовала.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.