今天上学校的图书馆，看到了一个好玩的东西，特意百度了下，发现叫做“标签球”，效果图为：
直接代码如下：
#div1{position:relative;width:350px;height:350px;border:1px solid #000;margin:20px auto 0; }#div1 a{position:absolute;top:0px;left:0px;font-family:Microsoft YaHei;color:#000;font-weight:bold;text-decoration:none;padding:3px 6px; }#div1 a:hover{border:1px solid #eee;background:#FFF; }#div1 .blue{color:blue;}#div1 .red{color:red;}#div1 .green{color:green;}
<divid="div1"><ahref="#">标签云</a><ahref="#"class="red">php</a><ahref="#">瀑布流</a><ahref="#">Tab</a><ahref="#"class="blue">流体布局</a><ahref="#">SEO</a><ahref="#"class="red">彩蛋</a><ahref="#"class="green">javaScript</a><ahref="#">miaov</a><ahref="#"class="red">CSS</a><ahref="#">asp.net</a><ahref="#"class="blue">蓝色经典</a><ahref="#">OOP</a><ahref="#"class="red">Android</a><ahref="#"class="blue">妙味茶馆</a><ahref="#">dialog</a><ahref="#"class="blue">淘客</a><ahref="#">Pin</a><ahref="#">微博</a><ahref="#"class="green">IPhone</a></div>
$(document).ready(function() {
$("#div1").windstagball({
radius:120,
speed:10});
});
首先得写好布局，最外层div样式position设置为relative内层元素position为absolute，这样才能形成效果，top为0，left为0先导入jquery文件，再导入相应的插件文件获取$("#xxx")元素，并调用windstagball()函数，radius是标签球的变径大小，speed顾名思义就是运动的速度。Demo：http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html