[jQuery]3D效果的标签云
刚才看了篇园友关于如何自定义标签云的文章,心痒痒自己也想弄一个,其实原理非常简单,就是动态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= "https://files.cnblogs.com/justinw/jquery.engine3D.js" type= "text/javascript" charset= "utf-8" ></script> <script src= "https://files.cnblogs.com/justinw/jquery.particlePhysics.js" type= "text/javascript" charset= "utf-8" ></script> <script src= "https://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://justinw.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
出处:http://justinw.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
分类:
JavaScript
, jQuery
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!