很不錯標籤雲js外掛程式

標籤：一個   str   demo   使用方法   androi   1.0   target   瀑布流   net   

在藍色看到有需要標籤雲的球形效果，我記得之前在網上見到過，印象比較深刻，就找出地址發給他了，接下來卻還有人需要這個效果的JQuery外掛程式，網上好像也有，但是我看現在這個就不錯，就想想自己改成jquery外掛程式，方便喜歡使用jquery外掛程式的人使用。

首先，說明下，這個tagcloud來源於妙味茶館(http://www.miaov.com/)，裡面有很多效果的教程，tagcloud只是其中一個，全部是用原生Javascript實現的，他們的Demo地址：http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html(已經失效)先感謝下他們的分享和教程。

接下來，看看此外掛程式的：

windstagball的Demo：

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

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

使用方法很簡單，引入jquery和jquery.windstagball.js,需要顯示為標籤的HTML如下：

 

<div id="div">

    <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>

注意，這裡的div要設定CSS"position:relative;"，然後在頁面實現：

$("#div").windstagball();

當然，也可以使用參數，如下：

$("#div").windstagball({

            radius:120,

            speed:10

 });

radius為標籤雲的半徑，單位像素，speed則為運行速度，建議使用預設值10。

好了，再去看看你的頁面，就有很炫的tagcloud效果了！（轉）

很不錯標籤雲js外掛程式