标签云(tagcloud)的球形JQuery插件

标签云

标签云(tagcloud)的球形JQuery插件

在蓝色看到有需要标签云的球形效果，我记得之前在网上见到过，印象比较深刻，就找出地址发给他了，接下来却还有人需要这个效果的JQuery插件，网上好像也有，但是我看现在这个就不错，就想想自己改成jquery插件，方便喜欢使用jquery插件的人使用。

首先，说明下，这个tagcloud来源于妙味茶馆(http://www./)，里面有很多效果的教程，tagcloud只是其中一个，全部是用原生Javascript实现的，他们的Demo地址：http://www./miaov_demo/3dLable/miaov_demo.html，先感谢下他们的分享和教程。

接下来，看看此插件的效果图：

windstagball的Demo：

演示地址：http://www./p/windstagball/index.html

下载包：http://www./p/windstagball/windstagballv1.0.zip

使用方法很简单，引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div id="div"> <a href="#">标签云</a> <a href="#" class="red">PHP</a> <a href="#">瀑布流</a> <a href="#">Tab</a> <a href="#" class="blue">流体布局</a> <a href="#">SEO</a> <a href="#" class="red">彩蛋</a> <a href="#" class="green">JavaScript</a> <a href="#">miaov</a> <a href="#" class="red">CSS</a> <a href="#">asp.net</a> <a href="#" class="blue">蓝色经典</a> <a href="#">OOP</a> <a href="#" class="red">Android</a> <a href="#" class="blue">妙味茶馆</a> <a href="#">dialog</a> <a href="#" class="blue">淘客</a> <a href="#">Pin</a> <a href="#">微博</a> <a href="#" class="green">IPhone</a> </div>

注意，这里的div要设置CSS“position:relative;”，然后在页面实现：

1	<span class="pln">$</span><span class="pun">(</span><span class="str">"#div"</span><span class="pun">).</span><span class="pln">windstagball</span><span class="pun">();</span>

当然，也可以使用参数，如下：

1 2 3

<span class="pln">$</span><span class="pun">(</span><span class="str">"#div"</span><span class="pun">).</span><span class="pln">windstagball</span><span class="pun">({</span><span class="pln">             radius</span><span class="pun">:</span><span class="lit">120</span><span class="pun">,</span><span class="pln">             speed</span><span class="pun">:</span><span class="lit">10</span><span class="pun">});</span>

radius为标签云的半径，单位像素，speed则为运行速度，建议使用默认值10。

好了，再去看看你的页面，就有很炫的tagcloud效果了！

==========================================

分享一个jQuery的标签云插件：3D tag cloud

http://www./technology/jquerynews/20111205tagcloudbyjquery/

大家可能都看到过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./technology/html" style="color:#f00;" rel="20">HTML</a></li>
	<li><a href="http://www./technology/css" rel="15">CSS</a></li>
	<li><a href="http://www./technology/javascript" rel="10">Javascript</a></li>
	<li><a href="http://www./technology/jquery" rel="5">jQuery</a></li>
	<li><a href="http://www./technology/jquerynews" rel="1">jQuery plugin</a></li>
	<li><a href="http://www./technology/jquerytutorial" rel="5">jQuery tutorial</a></li>
	<li><a href="http://www./technology/jqueryhowto" rel="10">jQuery howto</a></li>
	<li><a href="http://www./technology/jqueryplugins" rel="15">jQuery plugins</a></li>
	<li><a href="http://www./technology/jquerymobile" style="color:#f00" rel="20">jQuery mobile</a></li>
	<li><a href="http://www./technology/javautilities" rel="15">java</a></li>
	<li><a href="http://www./technology/seo" rel="10">SEO</a></li>
	<li><a href="http://www./technology/onlinequiz" rel="5">Quiz</a></li>
	<li><a href="http://www./internet/news" rel="1">News</a></li>
	<li><a href="http://www./internet/people" rel="5">People</a></li>
	<li><a href="http://www./internet/mobile" rel="10">Mobile</a></li>
	<li><a href="http://www./tools/photoshop" rel="15">Photoshop</a></li>
	<li><a href="http://www./tools/design" style="color:#f00" rel="20">Design</a></li>
    </ul>
</div>

是不是很简单？大家可以方便的添加标签云到网站上了！

======================================================================

制作云标签特效的jQuery tagcloud插件下载

http://www./

===================================================

演示地址：http://www./p/windstagball/index.html
下载包：http://www./p/windstagball/windstagballv1.0.zip
使用方法很简单，引入jquery和jquery.windstagball.js,需要显示为标签的HTML如下：<divid="div">
<a href="#">标签云</a>
<a href="#" class="red">PHP</a>
<a href="#">瀑布流</a>
<a href="#">Tab</a>
<a href="#" class="blue">流体布局</a>
<a href="#">SEO</a>
<a href="#" class="red">彩蛋</a>

<a href="#" class="green">JavaScript</a>
<a href="#">miaov</a>
<a href="#" class="red">CSS</a>
<a href="#">asp.net</a>
<a href="#" class="blue">蓝色经典</a>
<a href="#">OOP</a>
<a href="#" class="red">Android</a>
<a href="#" class="blue">妙味茶馆</a>

<a href="#">dialog</a>
<a href="#" class="blue">淘客</a>
<a href="#">Pin</a>
<a href="#">微博</a>
<a href="#" class="green">IPhone</a>
</div>
注意，这里的div要设置CSS“position:relative;”，然后在页面实现：$("#div").windstagball();
当然，也可以使用参数，如下：$("#div").windstagball({
radius:120,
speed:10
});

================================================