标签云(tagcloud)的球形JQuery插件

2020-12-14 02:41:02 编辑 0 阅读量:693

首先，说明下，这个tagcloud来源于[妙味茶馆](http://www.miaov.com/)，里面有很多效果的教程，tagcloud只是其中一个，全部是用原生Javascript实现的，他们的Demo地址：http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html ，先感谢下他们的分享和教程。

接下来，看看此插件的效果图：

![](http://cblog.xyz/media/2017/06/tagcloud.jpg)

windstagball的Demo：

演示地址：http://www.lijian.net/p/windstagball/index.html

下载包：http://www.lijian.net/p/windstagball/windstagballv1.0.zip

使用方法很简单，引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下：
```
&lt;div id="div"&gt;
	&lt;a href="#"&gt;标签云&lt;/a&gt;
	&lt;a href="#" class="red"&gt;PHP&lt;/a&gt;
	&lt;a href="#"&gt;瀑布流&lt;/a&gt;
	&lt;a href="#"&gt;Tab&lt;/a&gt;
	&lt;a href="#" class="blue"&gt;流体布局&lt;/a&gt;
	&lt;a href="#"&gt;SEO&lt;/a&gt;
	&lt;a href="#" class="red"&gt;彩蛋&lt;/a&gt;
	&lt;a href="#" class="green"&gt;JavaScript&lt;/a&gt;
	&lt;a href="#"&gt;miaov&lt;/a&gt;
	&lt;a href="#" class="red"&gt;CSS&lt;/a&gt;
	&lt;a href="#"&gt;asp.net&lt;/a&gt;
	&lt;a href="#" class="blue"&gt;蓝色经典&lt;/a&gt;
	&lt;a href="#"&gt;OOP&lt;/a&gt;
	&lt;a href="#" class="red"&gt;Android&lt;/a&gt;
	&lt;a href="#" class="blue"&gt;妙味茶馆&lt;/a&gt;
	&lt;a href="#"&gt;dialog&lt;/a&gt;
	&lt;a href="#" class="blue"&gt;淘客&lt;/a&gt;
	&lt;a href="#"&gt;Pin&lt;/a&gt;
	&lt;a href="#"&gt;微博&lt;/a&gt;
	&lt;a href="#" class="green"&gt;IPhone&lt;/a&gt;
&lt;/div&gt;
```
注意，这里的div要设置CSS`“position:relative;”`，然后在页面实现：
```
$("#div").windstagball();
1
$("#div").windstagball();
```
当然，也可以使用参数，如下：
```
$("#div").windstagball({
 radius:120,
 speed:10});
```
radius为标签云的半径，单位像素，speed则为运行速度，建议使用默认值10。

好了，再去看看你的页面，就有很炫的tagcloud效果了！

更具体的显示参见：
https://github.com/caitinggui/Blog/commit/325fe6391f8ffe9796bd5f86e5a0120daddeb72f

---
另一个有趣的词云js：
https://tagcloud.congm.in/

附件:

tagcloud-1.1.1.tar.gz
windstagballv1.0.zip