jquery 3D 标签云示例代码
zoom:90初始的缩放度
min_zoom:25
max_zoom:120
zoom_factor:2-鼠标滚轮的缩放速度
rotate_factor:-0.45-鼠标移动时球体旋转的数量。正数将反向旋转
fps:10-定义每秒动画更新的次数
centrex:250-在containerdiv中水平方向旋转中心
centrey:250在containerdiv中垂直方向旋转中心
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标签:
<divid="ts1"style="width:500px;height:500px;background-color:#000;"> <ul> <li><ahref="http://www.gbin1.com/technology/html"style="color:#f00;"rel="20">HTML</a></li> <li><ahref="http://www.gbin1.com/technology/css"rel="15">CSS</a></li> <li><ahref="http://www.gbin1.com/technology/javascript"rel="10">Javascript</a></li> <li><ahref="http://www.gbin1.com/technology/jquery"rel="5">jQuery</a></li> <li><ahref="http://www.gbin1.com/technology/jquerynews"rel="1">jQueryplugin</a></li> <li><ahref="http://www.gbin1.com/technology/jquerytutorial"rel="5">jQuerytutorial</a></li> <li><ahref="http://www.gbin1.com/technology/jqueryhowto"rel="10">jQueryhowto</a></li> <li><ahref="http://www.gbin1.com/technology/jqueryplugins"rel="15">jQueryplugins</a></li> <li><ahref="http://www.gbin1.com/technology/jquerymobile"style="color:#f00"rel="20">jQuerymobile</a></li> <li><ahref="http://www.gbin1.com/technology/javautilities"rel="15">java</a></li> <li><ahref="http://www.gbin1.com/technology/seo"rel="10">SEO</a></li> <li><ahref="http://www.gbin1.com/technology/onlinequiz"rel="5">Quiz</a></li> <li><ahref="http://www.gbin1.com/internet/news"rel="1">News</a></li> <li><ahref="http://www.gbin1.com/internet/people"rel="5">People</a></li> <li><ahref="http://www.gbin1.com/internet/mobile"rel="10">Mobile</a></li> <li><ahref="http://www.gbin1.com/tools/photoshop"rel="15">Photoshop</a></li> <li><ahref="http://www.gbin1.com/tools/design"style="color:#f00"rel="20">Design</a></li> </ul> </div>