今天上學校的圖書館,看到了一個好玩的東西,特意百度了下,發現叫做“標簽球”,效果圖為:
直接代碼如下:
#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;}
<div id="div1"> <a href="#">標簽雲</a> <a href="#" class="red">PHP</a> <a href="#">瀑布流</a> <a href="#">Tab</a> <a href="#" class="blue">流體布局</a> <a href="#">SEO</a> <a href="#" class="red">彩蛋</a> <a href="#" class="green">JavaScript</a> <a href="#">miaov</a> <a href="#" class="red">CSS</a> <a href="#">asp.net</a> <a href="#" class="blue">藍色經典</a> <a href="#">OOP</a> <a href="#" class="red">Android</a> <a href="#" class="blue">妙味茶館</a> <a href="#">dialog</a> <a href="#" class="blue">淘客</a> <a href="#">Pin</a> <a href="#">微博</a> <a href="#" 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