当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery 3D 标签云示例代码

jquery 3D 标签云示例代码

2019年03月25日  | 移动技术网IT编程  | 我要评论

zoom: 90 初始的缩放度
min_zoom: 25
max_zoom: 120
zoom_factor: 2 - 鼠标滚轮的缩放速度
rotate_factor: -0.45 - 鼠标移动时球体旋转的数量。正数将反向旋转
fps: 10 - 定义每秒动画更新的次数
centrex: 250 - 在container p中水平方向旋转中心
centrey: 250 在container p中垂直方向旋转中心
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标签：

. 代码如下:


<p 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/" 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>
</p>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网