Анимированное облако тегов на jQuery Easing
|
1 2 3 |
#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;} |
2#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 7 8 9 |
<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> |
3#: Следующий код в то место, где будет само облако тегов: 1) Для первого эффекта из демо:
|
1 2 3 4 5 6 7 8 |
<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> |
|
1 2 3 4 5 6 7 8 |
<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> |
|
1 2 3 4 5 6 7 8 |
<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> |
