JS方法实现WordPress旋转3D标签云

几年前，在wordpress建站中经常出现一个Flash版的标签云 – wp-cumulus，我们都知道 Flash对资源的耗费很大，今天我们介绍的这个3D旋转标签云完全使用JS代码编写，很小只有几K，加载很快。

具体效果请看下面的截图：
biaoqianyun

下面介绍一下实现方法：

1. 下载3D旋转标签云效果脚本
注：这个3D旋转标签云有两种效果的JS文件，可以都下载下来测试一下效果。

2. 切换到主题目录，打开 header.php文件，加载代码

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

1	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

3. 将下面的样式添加到主题style.css的最后

#tag_cloud-2 {
    position:relative;
    height:340px;
    margin: 10px auto 0;
}
#tag_cloud-2 a {
    position:absolute;
    color: #fff;
    text-align: center;
    text-overflow: ellipsis;
    whitewhite-space: nowrap;
    top:0px;
    left:0px;
    padding: 3px 5px;
    border: none;
}
#tag_cloud-2 a:hover {
    background: #d02f53;
    display: block;
}
#tag_cloud-2 a:nth-child(n) {
    background: #666;
    border-radius: 3px;
    display: inline-block;
    line-height: 18px;
    margin: 0 10px 15px 0;
}
#tag_cloud-2 a:nth-child(2n) {
    background: #d1a601;
}
#tag_cloud-2 a:nth-child(3n) {
    background: #286c4a;
}
#tag_cloud-2 a:nth-child(5n) {
    background: #518ab2;
}
#tag_cloud-2 a:nth-child(4n) {
    background: #c91d13;
}

#tag_cloud-2 {

position:relative;

height:340px;

margin: 10px auto 0;

}

#tag_cloud-2 a {

position:absolute;

color: #fff;

text-align: center;

text-overflow: ellipsis;

whitewhite-space: nowrap;

top:0px;

left:0px;

padding: 3px 5px;

border: none;

}

#tag_cloud-2 a:hover {

background: #d02f53;

display: block;

}

#tag_cloud-2 a:nth-child(n) {

background: #666;

border-radius: 3px;

display: inline-block;

line-height: 18px;

margin: 0 10px 15px 0;

}

#tag_cloud-2 a:nth-child(2n) {

background: #d1a601;

}

#tag_cloud-2 a:nth-child(3n) {

background: #286c4a;

}

#tag_cloud-2 a:nth-child(5n) {

background: #518ab2;

}

#tag_cloud-2 a:nth-child(4n) {

background: #c91d13;

}

4. 修改对应选择器名称
比较麻烦点的是，其中 #tag_cloud-2 需根据不同情况加以修改，比如查看标签云小工具的网页源代码显示的是：

<aside id="tag_cloud-3" class="widget widget_tag_cloud">
<h2 class="widget-title">标签</h2>

1 2	<aside id="tag_cloud-3" class="widget widget_tag_cloud"> <h2 class="widget-title">标签</h2>

需要将 #tag_cloud-2 修改为 #tag_cloud-3，同时将3d.js中的 tag_cloud-2 也改为 tag_cloud-3 。

这个3D旋转标签云本身是支持低版本IE的，不过本例中配套的样式使用了CSS3特效，所以在低版本IE上标签背影色会不显示。