jquery 3D 标签云

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>