刚才看了篇园友关于如何自定义标签云的文章，心痒痒自己也想弄一个，其实原理非常简单，就是动态load标签页里的标签，按需要的格式重新动态生成DOM结构，再通过第三方的js插件(他们用的是Google Visualization API Gallery中的TermCloud)将特定的DOM转换成标签云的效果就OK了！所以最有技术含量的地方还在第三方的js插件里，正好我不久前刚玩过一款很牛叉的3D效果的标签云jQuery插件，挂到自己的博客里试了下效果（效果就是现在我博客左边的随笔分类的样子），还不错，就是有点耗性能！我博客上不想挂标签云了，就搞了这个随笔分类云,喜欢的朋友拿去玩玩吧。结合前面自定义标签云那篇文章，同样很容易做出3D效果的标签云。
我的例子使用方法如下：
在 [后台管理]>[设置]>[页脚Html代码] 里插入下面代码即可：
|
1
2
3
4
5
6
7
8
9
10
11
|
<script src=
"http://files.cnblogs.com/justinw/jquery.engine3D.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script src=
"http://files.cnblogs.com/justinw/jquery.particlePhysics.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script src=
"http://files.cnblogs.com/justinw/jquery.starfieldTagCloud.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<script type=
"text/javascript"
>
jQuery(document).ready(
function
() {
//注意：这里是用的随笔分类做例子，你自己可以根据你自己情况任意设定。
$(
".catListPostCategory>ul"
).wrap(
"<div class='wrap' ></div>"
).parent().css({
'width'
:
'245px'
,
'height'
:
'496px'
});
var
options = {
"range"
: [-200, 300],
"gravity"
: -10,
"xPos"
: 0.5,
"yPos"
: 0.5,
"gravityVector"
: [0, 0, 1],
"interval"
: 100,
"hoverGravityFactor"
: 0 };
jQuery(
"div.wrap"
).starfieldTagCloud(options);
});
</script>
|
这里再隆重推荐一下这款牛叉的3D效果的标签云插件：Starfield Tag Cloud
本文转自Justin博客园博客，原文链接：http://www.cnblogs.com/justinw/archive/2010/06/17/1759661.html，如需转载请自行联系原作者
