| Главная » Файлы » Прочие скрипты » 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 | |
| Просмотров: 421 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |