分享一个jQuery的标签云插件:3D tag cloud[强力推荐]
2012-12-09 23:13
726 查看
大家可能都看到过Flash实现的标签云,很多网站都使用Flash构建的标签云,包括wordpress中都有相关的标签云插件。今天我们这里介绍一款jQuery开发的标签云插件:3D tag cloud,希望大家喜欢!
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) - 不能使用颜色名字
是不是很简单?大家可以方便的添加标签云到网站上了!
点击下载
相关选项
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 tag cloud
- 分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果
- 分享一个jQuery的小测验(Quiz)插件:jQuizzy
- 【分享】博客美化(4)为博客添加一个智能的文章推荐插件
- 推荐一个挺好用的jquery插件,jquery.jqplot.js(画图),此处简略得说一下折线图的画法
- 分享一个快速将传统表单转化为AJAX支持的表单的jQuery插件 - ALAJAX
- 分享一个jquery插件,弥补一下hover事件的小小不足
- 分享一个自己做的基于Jquery的弹出框插件
- 分享一个jQuery的超酷分页插件 - jPages
- 强力推荐17款jQuery图片滑动插件[国外巨作]
- 分享一个最具有灵活性的jQuery幻灯插件 - Rhinoslider
- GBin1分享:一个漂亮的jQuery页面内容导航插件 - Flexiable Nav
- 分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
- 推荐一个很不错的JQuery 下拉框选择插件
- 分享一个帮助用户全屏阅读的jQuery插件 - jQuery fullscreen
- 一个非常棒的jQuery 评分插件--好东西要分享
- 分享一个自己写的jquery分页插件
- 会用到的 多文件 flash上传 Web前端 推荐一个Jquery 插件 Uploadify
- 分享一个jQuery的超酷分页插件 - jPages
- 分享一个jQuery iframe 弹窗插件Boxen