[jQuery]3D效果的标签云-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

[jQuery]3D效果的标签云

简介:

刚才看了篇园友关于如何自定义标签云的文章,心痒痒自己也想弄一个,其实原理非常简单,就是动态load标签页里的标签,按需要的格式重新动态生成DOM结构,再通过第三方的js插件(他们用的是Google Visualization API Gallery中的TermCloud)将特定的DOM转换成标签云的效果就OK了!所以最有技术含量的地方还在第三方的js插件里,正好我不久前刚玩过一款很牛叉的3D效果的标签云jQuery插件,挂到自己的博客里试了下效果(效果就是现在我博客左边的随笔分类的样子),还不错,就是有点耗性能!我博客上不想挂标签云了,就搞了这个随笔分类云,喜欢的朋友拿去玩玩吧。结合前面自定义标签云那篇文章,同样很容易做出3D效果的标签云。

2010061719244429.png

我的例子使用方法如下:

 [后台管理]>[设置]>[页脚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,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: