jquery 3D 标签云
http://www.gbin1.com/technology/jquerynews/20111205tagcloudbyjquery/index.html
相关选项
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 3D 标签云的更多相关文章
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!
SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事 基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...
- 解析3D标签云,其实很简单
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 最近开始用canvas搞3D了,搞得也是简单的东西,就是球体转圈.做出来后,突然想起以前看过的3D标签云,在以前觉得真心狂拽酷炫叼啊,当时 ...
- 纯JS实现的3D标签云,不依赖不论什么第三方库,支持移动页面
<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html PUBLIC &q ...
- 3d标签云(JS版)
http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html http://www.lijian.net/p/windstagball/index.h ...
- 3D标签云
一.圆的坐标表达式 for(var i = 0;i < len;i++){ degree = (2*(k+1)-1)/len - 1;a = Math.acos(degree);//这样取得弧度 ...
- vue实现标签云效果
闲扯两句 最近想给自己的博客上加上一个3D标签云的效果,用来表示自己博客文章的分组,网上找到了canvas实现的,还有a元素实现的解析3D标签云,我想让标签可以选择和点击,又不想在标签数量较多时操作a ...
- 3D球状标签云(兼容IE8)
看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...
- 分享一个3D球面标签云
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- C++中类的public,private,protected比较
当private,public,protected单纯的作为一个类中的成员权限设置时:private: 只能由该类中的函数.其友元函数访问,不能被任何其他访问,该类的对象也不能访问. protecte ...
- Delphi实现文件关联
文件关联为我们带来很多的方便.Delphi自带有注册表对象TRegistry,可以通过它取得或改变注册表相关键值的内容. Function GetAssociatedExec(FileExt: Str ...
- opencv3.0 在 android 上的使用
下载 OpenCV-3.0.0-android-sdk-1.zip 打开 intellj,新建立一个 android 工程后选择工程属性,导入模块(Import module from externa ...
- html --- canvas --- javascript --- 拖拽圆圈
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- python 映射列表 学习
列表映射是个非常有用的方法,通过对列表的每个元素应用一个函数来转换数据,可以使用一种策略或者方法来遍历计算每个元素. 例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- bluebird-Core API(一)
new Promise new Promise(function(function resolve, function reject) resolver) -> Promise 创建一个新的Pr ...
- 云计算分布式大数据Hadoop实战高手之路第七讲Hadoop图文训练课程:通过HDFS的心跳来测试replication具体的工作机制和流程
这一讲主要深入使用HDFS命令行工具操作Hadoop分布式集群,主要是通过实验的配置hdfs-site.xml文件的心跳来测试replication具体的工作和流程. 通过HDFS的心跳来测试repl ...
- Web 检测代码 web analysis 开源 open source
1. Grape Web Statistics Grape Web Statistics is a fairly simple piece of analytics software. Grape i ...
- dom 拖拽div
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- php 扩展apc 参数优化
编辑php.ini 输入下面 [apc] apc.enabled=1apc.shm_segments = 1apc.shm_size = 1Gapc.ttl = 0apc.user_ttl = 0ap ...