WP-Cumulus支持的3D标签云兑现 _Web前端

WP-Cumulus支持的3D标签云实现

WP-Cumulus是WordPress的一款不错的插件，它使用Flash+Js来实现标签云效果，超酷的3D立体效果给用户强大的视觉冲击。

WP-Cumulus官网下载地址：http://wordpress.org/extend/plugins/wp-cumulus/

Note：WordPress官网提供的WP-Cumulus包中的tagcloud.swf只支持英文的标签名，要显示中文的标签名请下载下面的中文破解版！！！

tagcolud.swf支持中文版本下载地址：http://download.csdn.net/detail/czw2010/5115131

1、使用<script>标签引入swfobject.js脚本，swfobject.js用于控制Flash。

<!--SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/-->
<script type="text/javascript" src="wp-cumulus/swfobject.js"></script>

2、创建一个标签用于放置该标签云Flash。

<div id="flashTagsCloud">
   <p>WP Cumulus Flash tag cloud by <a href="http://www.roytanck.com" rel="nofollow">Roy Tanck</a> requires <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a> 9 or better.</p>
</div>

Note：<div>标签内的内容会被生成的Flash标签云所覆盖，我们这样写的目地是为了防止当浏览器不支持js或flashplayer版本过低时，将该内容显示为提示信息。

3、创建swfobject对象来生成flash标签云并渲染到指定的<div>标签中。我们可以通过两种方式来生成标签云，一种是直接在js中生成要显示的标签串，另一种是将要显示的标签生成为xml文件，由Flash来自动解析。

（1）直接在js中生成标签组串。示例如下：

<script type="text/javascript">
      var widget_so = new SWFObject("wp-cumulus/tagcloud.swf?r=23432","tagcloudflash", "265", "265", "9", "#F0F7FB");
      widget_so.addParam("wmode", "transparent");
      widget_so.addParam("allowScriptAccess", "always");
      widget_so.addVariable("tcolor", "red");
      widget_so.addVariable("tcolor2", "yellow");
      widget_so.addVariable("hicolor", "red");
      widget_so.addVariable("tspeed", "250");
      widget_so.addVariable("distr", "true");
      widget_so.addVariable("mode", "tags");
      widget_so.addVariable("tagcloud","<tags><a href='http://www.google.com' style='22'>Google</a><a href='http://www.baidu.com' style='12'>Baidu</a><a href='http://www.sina.com.cn' style='16'>Sina</a><a href='http://www.apple.com.cn' style='14'>Apple</a><a href='http://wsi.gucas.ac.cn' style='12'>WSI</a><a href='http://www.bit.edu.cn' style='12'>BIT</a><a href='http://www.sony.com.cn' style='9'>SONY</a><a href='http://www.gucas.ac.cn' style='10'>GUCAS</a><a href='http://www.sohu.com.cn' style='10'>Sohu</a><a href='http://www.renren.com' style='12'>renren</a><a href='http://www.qq.com' style='12'>QQ</a></tags>");
       widget_so.write("flashTagsCloud"); 
</script>

（2）先生成xml后交由Flash解析。

<script type="text/javascript">
      var widget_so = new SWFObject("wp-cumulus/tagcloud.swf?r=23432","tagcloudflash", "265", "265", "9", "#F0F7FB");
      widget_so.addParam("wmode", "transparent");
      widget_so.addParam("allowScriptAccess", "always");
      widget_so.addVariable("tcolor", "red");
      widget_so.addVariable("tcolor2", "yellow");
      widget_so.addVariable("hicolor", "red");
      widget_so.addVariable("tspeed", "250");
      widget_so.addVariable("distr", "true");
      widget_so.addVariable("mode", "tags");
      widget_so.addVariable("xmlpath","tagcloud.xml");
       widget_so.write("flashTagsCloud"); 
</script>

Note：我们对 SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);方法进行详细讲述：

必须参数：

swf：指定swf文件的名字和路径。
id：指定生成的object或embed标签的ID。
width：指定flash的宽度。
height：指定flash的高度。
version：指定flashplayer需要的最低版本。格式如下 ‘majorVersion.minorVersion.revision’. 例如: "6.0.65". 或者直接用大版本号, 例如 "6".
background-color：指定flash背景颜色，为hex值。

可选参数：

quality：指定Flash的画质。默认为"high".
xiRedirectUrl：如果你要重定向那些完成ExpressInstall 升级的用户，可以在这里指定URL。
redirectUrl：将没有安装flashplayer版本的用户重定向该URL。
detectKey：This is the url variable name the SWFObject script will look for when bypassing the detection

附录：Flash提供的参数解析：

wmode：window | direct | opaque | transparent | gpu。指定flash显示模式。transparent表示是透明模式，gup表示硬件加速模式。默认值是window。
tcolor：指定默认的标签颜色。
tcolor2：第二标签颜色，标签根据它们的popularity取得两个颜色之间的颜色。
hicolor：鼠标放在标签上的颜色。
tspeed：指定标签转动的速度.默认值是100, 数字越大速度越大。
distr：指定标签会均匀分布在球的表面。默认值为false。
mode：tags|cats|both。指定显示的是标签、分组或两者。
tagcolud：xml格式的标签组串。
xmlpath：指定xml地址，默认为tagcolud.xml。