標籤雲( tagcloud ) 基於 jQuery 框架

標籤雲記得之前有看過的大部分都是以 FLASH 來製作，但是現在大部分的網站設計的人都知道 SEO 的重要性，所以在網頁設計上盡量的減少 FLASH 的數量，改使用 JavaScript 來達到類似的效果。現在要介紹的標籤雲就是其中一個例子，這一個 jQuery 套件讓你網頁的所有標籤文字全部聚在一起就像一個球的形狀，達到既美觀又實用的效果。

使用方法：
第一步 載入標籤雲( tagcloud ) 需要用到的 JavaScript 檔案
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 標籤雲( tagcloud ) 的主程式碼 -->
<script type="text/javascript" src="js/jquery.windstagball.js"></script>

第二步 使用 HTML 設計標籤的內容
<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-Fu Design</a>
<a href="#">OOP</a>
<a href="#" class="red">Android</a>
<a href="#" class="blue">Design</a>
<a href="#">dialog</a>
<a href="#" class="blue">A-Fu</a>
<a href="#">Pin</a>
<a href="#">設計</a>
<a href="#" class="green">IPhone</a>
</div>

第三步 為 HTML 內容設計 CSS 樣式表
body {background: #FFF }
#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;}
p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; }
p a { font-size: 14px; color: #ba0c0c; }
p a:hover { color: red; }

第四步 撰寫 JavaScript 讓標籤雲( tagcloud ) 初始化
$(function() {
  $("#div1").windstagball({
radius:120,// 標籤雲( tagcloud )圓的半徑
speed:10   // 轉動的速度
  });
});

作者網站：http://www.lijian.net/?p=47
檔案大小：38 KB (包含範例)
檔案下載：http://www.lijian.net/p/windstagball/windstagballv1.0.zip
檔案備份：下載