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 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
Three.js学习之网格
Aug 10 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
js实现移动端轮播图滑动切换
Dec 21 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(2)
2006/10/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
说一说Python logging
2016/04/15 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
Python中的元组介绍
2019/01/28 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
法律专业自我鉴定
2013/10/03 职场文书
学校消防演习方案
2014/02/19 职场文书
爱心捐款倡议书
2014/04/14 职场文书
财务管理专业求职信
2014/06/11 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
大专护理专业自荐信
2015/03/25 职场文书
道歉信范文
2015/05/12 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python