jquery 3D 标签云示例代码


Posted in Javascript onJune 12, 2014

相关选项

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>
Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
javascript面向对象特性代码实例
Jun 12 #Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 #Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 #Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
You might like
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server