Главная » Файлы » Прочие скрипты » jQuery
Анимированное облако тегов на jQuery Easing и jQuery
23.06.14, 11:27:54

Скачать файл



Очень интересный плагин, который качественно анимирует набор тегов

Установка:

После /head на нужных страницах вставляйте:
Код
<style type="text/css">
  #tag-cloud { position:relative; top:10px; left:10px; height:300px; width:400px; border:1px solid red; overflow:hidden; margin-bottom:40px;}  
  #tag-cloud1 { position:relative; top:10px; left:10px; height:400px; width:500px; border:1px solid red; overflow:hidden; margin-bottom:40px;}  
  #tag-cloud2 { position:relative; top:10px; left:10px; height:300px; width:300px; border:1px solid red; overflow:hidden; margin-bottom:40px;}  
  </style>

  <script type="text/javascript" src="/js/jquery.easing.js"></script>
  <script type="text/javascript" src="/js/jquery.tagcloud.min.js"></script>
  <script type="text/javascript">
  $(function(){  
$("#tag-cloud").tagCloud();  
$("#tag-cloud1").tagCloud({"direction":"horizontal", "easein":"easeOutBounce", "speed":2000});  
$("#tag-cloud2").tagCloud({"direction":"vertical", "easein":"easeOutBack", "speed":2000});  
  });  
  </script>


Следующий код в то место, где будет само облако тегов:

1) Для эффекта первого демо:
Код
<ul id="tag-cloud">
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
  </ul>


2) Для эффекта второго демо:
Код
<ul id="tag-cloud1">
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
  </ul>


3) Для эффекта третьего демо:
Код
<ul id="tag-cloud2">
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
<li><a href="Ссылка" title="Титульник">Название тега</a></li>
  </ul>


Остаётся лишь залить два скрипта из прикреплённого архива в папку js

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: анимированное, на, JQuery, тегов, Облако, Easing
Просмотров: 401 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: