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 相关文章推荐
flash遮住div问题的正确解决方法
Feb 27 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php的控制语句
2006/10/09 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
layui表格数据重载
2019/07/27 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python实现查询IP地址所在地
2015/03/29 Python
Python文件及目录操作实例详解
2015/06/04 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
python 简单的多线程链接实现代码
2016/08/28 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
详解Python3 基本数据类型
2019/04/19 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
计算机本科生自荐信
2013/10/15 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
婚宴父母致辞
2015/07/27 职场文书
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL