Плагин Mobily Blocks JQuery

Плагин Mobily Blocks JQuery

16.06.201222425

Плагин, возможно, не самый полезный и важный, но, тем не менее, очень интересный. При наведении или нажатии (на ваше усмотрение) на элемент его плавно окружат другие элементы. Самым ярким примером использования плагина 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;
}



Сохраните в социальную сеть
Комментарии (5)
74NET 16.06.2012 в 17:50Спам
Весело
0
Супер!
0
Гость 18.06.2012 в 07:26Спам
Красивая и нужная unerf :) Спасибо большое вам.
0
У меня одного не ставится?((
0
Вот это штука прикольная порадовала.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт