分享一個jQuery的標簽云插件：3D tag cloud
日期：2011/12/05 來源：GBin1.com
大家可能都看到過Flash實現的標簽云，很多網站都使用Flash構建的標簽云，包括wordpress中都有相關的標簽云插件。今天我們這里介紹一款jQuery開發的標簽云插件：3D tag cloud，希望大家喜歡！
相關選項
- zoom: 90 初始的縮放度
- min_zoom: 25
- max_zoom: 120
- zoom_factor: 2 - 鼠標滾輪的縮放速度
- rotate_factor: -0.45 - 鼠標移動時球體旋轉的數量。正數將反向旋轉
- fps: 10 - 定義每秒動畫更新的次數
- centrex: 250 - 在container div中水平方向旋轉中心
- centrey: 250 在container div中垂直方向旋轉中心
- min_font_size: 12
- max_font_size: 32
- font_units: 'px'
- random_points: 50 - 添加一些隨機的點到球體來提高效果
- foreground_colour: #fff - 接受的格式為： #333 #0A0A0A 和 rgb(n,n,n)
- background_colour: rgb(0,0,0) - 不能使用顏色名字
Javascript代碼：
$('.tags').tagcloud();
演示中的代碼如下：
$(function(){
$('#ts1').tagcloud({centrex:250, centrey:250, init_motion_x:10, init_motion_y:10});
});
HTML標簽：
<div id="ts1" style="width:500px; height:500px; background-color:#000;">
<ul>
<li><a style="color:#f00;" rel="20">HTML</a></li>
<li><a rel="15">CSS</a></li>
<li><a rel="10">Javascript</a></li>
<li><a rel="5">jQuery</a></li>
<li><a rel="1">jQuery plugin</a></li>
<li><a rel="5">jQuery tutorial</a></li>
<li><a rel="10">jQuery howto</a></li>
<li><a rel="15">jQuery plugins</a></li>
<li><a style="color:#f00" rel="20">jQuery mobile</a></li>
<li><a rel="15">java</a></li>
<li><a rel="10">SEO</a></li>
<li><a rel="5">Quiz</a></li>
<li><a rel="1">News</a></li>
<li><a rel="5">People</a></li>
<li><a rel="10">Mobile</a></li>
<li><a rel="15">Photoshop</a></li>
<li><a style="color:#f00" rel="20">Design</a></li>
</ul>
</div>
是不是很簡單？大家可以方便的添加標簽云到網站上了！
歡迎訪問GBin1.com
浙公網安備 33010602011771號