A colourful bubble?

Circle Tag Cloud Plugin for jQuery

昨天看到某个 blog 上一个 3D Tag Cloud 插件，效果很炫，是用 Flash 写的。很想把它移植到 JavaScript 来，不过尝试失败，最后得到的效果不甚理想，不过还是记录下来吧，也算是一个学习的过程。

*演示(Demo)
*下载(Download)

这个效果是基于 jQuery 编写的，也用到了 GSGD 的 Easing Plugin (如果选择使用 jQuery 自带的 “linear” 或者 “swing” 效果的话则不需要包含此插件)。

首先需要一个适当的 html 结构：

<h2>Circle Tag Cloud</h2>
<div id="tag_cloud">
    <a id="tag1" href="#1" style="font-size: 20pt; color:blueviolet">UED</a>
    <a id="tag2" href="#2" style="font-size: 10pt; color:maroon">JavaScript</a>
    <a id="tag3" href="#3" style="font-size: 15pt; color:dodgerblue">Jquery</a>
    <a id="tag4" href="#4" style="font-size: 8pt; color:violet">paopao</a>
    <a id="tag5" href="#5" style="font-size: 12pt; color:lightseagreen">demo</a>
</div>

然后给这段 html 加上一些必须的样式：

h2 {font: 13pt/15pt "Arial"; font-weight: bold; }
#tag_cloud{position:relative;width:300px;height:300px;background-color:#eee;overflow:hidden;}
#tag_cloud a{position:absolute;text-decoration:none;white-space:nowrap;}
#tag_cloud a:hover{border:1px solid #000}

当然还要载入一些必需的 js 文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.circletag.min.js"></script>

最后，在页面里加入如下的初始化 js 代码就 ok 了：

<script type="text/javascript">
    $(document).ready(function(){
        $("#tag_cloud").circleTag({ speed: 300 });
    });
</script>

下载地址在此

需求：
* jQuery 1.3 or higher
* jQuery Easing Plugin 1.3

Popularity: 2% [?]

Tags: easing, jQuery, plugin, tag