Minimal jQuery Based 3D Ball Tag Cloud - cloudTag.js
| File Size: | 9.01 KB |
|---|---|
| Views Total: | 10243 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another jQuery plugin that enables you to converts text links into a 3D ball style rotating tag cloud based on mousemove event listener.
See also:
- jQuery Plugin To Create 3D Sphere-style Tag Cloud - tagcloud
- TagCanvas - HTML5 Tag Cloud with Jquery
How to use it:
1. Load the latest jQuery library and jQuery cloudTag.js script in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/cloudTag.js"></script>
2. Wrap the text links with CSS class of 'tag' in a tag cloud container.
<div class="tagBall">
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
<a class="tag" target="_blank" href="#">item1</a>
<a class="tag" target="_blank" href="#">item2</a>
</div>
3. Call the plugin on the container. That's it.
<script type="text/javascript">
$(document).ready(function(){
$('.tagBall').cloudTag({
ballSize:100 // the size of the tag cloud ball
});
});
</script>
This awesome jQuery plugin is developed by keith990. For more Advanced Usages, please check the demo page or visit the official website.











