jquery 3D 标签云示例代码
更新时间:2014年06月12日 15:21:34 投稿:whsnow
标签云想必大家都有见到过吧,那么3D标签云,有没有接触过呢?本例为大家介绍下通过jquery 实现的3D标签云,感兴趣的朋友可以参考下
相关选项
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>
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>
相关文章
jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法2016-04-04以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下2016-05-05jQuery配合coin-slider插件制作幻灯片效果的流程解析
coin-slider是GitHub上的一个人气JavaScript开源插件,用它来实现幻灯片效果只需要动手写很少的代码,下面我们就来看一下jQuery配合coin-slider插件制作幻灯片效果的流程解析.2016-05-05
最新评论