大家可能都看到过Flash实现的标签云,很多网站都使用Flash构建的标签云,包括wordpress中都有相关的标签云插件。今天我们这里介绍一款jQuery开发的标签云插件:3D tag cloud,希望大家喜欢!
相关选项
- 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>
是不是很简单?大家可以方便的添加标签云到网站上了!
☆☆更多内容请关注我的博客园或虾米站长http://www.xiamizhan.com
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构