jquery 3D 標籤雲

標籤：des   style   blog   java   http   color   

http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html 


相關選項 

    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 href="http://www.gbin1.com/technology/html" style="color:#f00;" rel="20">HTML</a></li> 
    <li><a href="http://www.gbin1.com/technology/css" rel="15">CSS</a></li> 
    <li><a href="http://www.gbin1.com/technology/javascript" rel="10">Javascript</a></li> 
    <li><a href="http://www.gbin1.com/technology/jquery" rel="5">jQuery</a></li> 
    <li><a href="http://www.gbin1.com/technology/jquerynews" rel="1">jQuery plugin</a></li> 
    <li><a href="http://www.gbin1.com/technology/jquerytutorial" rel="5">jQuery tutorial</a></li> 
    <li><a href="http://www.gbin1.com/technology/jqueryhowto" rel="10">jQuery howto</a></li> 
    <li><a href="http://www.gbin1.com/technology/jqueryplugins" rel="15">jQuery plugins</a></li> 
    <li><a href="http://www.gbin1.com/technology/jquerymobile" style="color:#f00" rel="20">jQuery mobile</a></li> 
    <li><a href="http://www.gbin1.com/technology/javautilities" rel="15">java</a></li> 
    <li><a href="http://www.gbin1.com/technology/seo" rel="10">SEO</a></li> 
    <li><a href="http://www.gbin1.com/technology/onlinequiz" rel="5">Quiz</a></li> 
    <li><a href="http://www.gbin1.com/internet/news" rel="1">News</a></li> 
    <li><a href="http://www.gbin1.com/internet/people" rel="5">People</a></li> 
    <li><a href="http://www.gbin1.com/internet/mobile" rel="10">Mobile</a></li> 
    <li><a href="http://www.gbin1.com/tools/photoshop" rel="15">Photoshop</a></li> 
    <li><a href="http://www.gbin1.com/tools/design" style="color:#f00" rel="20">Design</a></li> 
    </ul> 
</div>