大佬教程收集整理的这篇文章主要介绍了JS方法实现WordPress旋转3D标签云，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
几年前，在中经常出现一个Flash版的标签云 – wp-cumulus，我们都知道 Flash对资源的耗费很大， 今天我们介绍的这个3D旋转标签云完全使用JS代码编写，很小只有几K，加载很快。
具体效果请看下面的截图：
下面介绍一下实现方法：
1. 下载3D旋转标签云效果脚本
注：这个3D旋转标签云有两种效果的JS文件，可以都下载下来测试一下效果。
2. 切换到主题目录，打开 header.PHP文件，加载代码
| Crayon-nums " data-setTings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891d40529a8948539755-1">1 Crayon-num" data-line="Crayon-5c891d40529a8948539755-3">3 Crayon-num" data-line="Crayon-5c891d40529a8948539755-5">5 Crayon-num" data-line="Crayon-5c891d40529a8948539755-7">7 Crayon-num" data-line="Crayon-5c891d40529a8948539755-9">9 Crayon-num" data-line="Crayon-5c891d40529a8948539755-11">11 Crayon-num" data-line="Crayon-5c891d40529a8948539755-13">13 Crayon-num" data-line="Crayon-5c891d40529a8948539755-15">15 Crayon-num" data-line="Crayon-5c891d40529a8948539755-17">17 Crayon-num" data-line="Crayon-5c891d40529a8948539755-19">19 Crayon-num" data-line="Crayon-5c891d40529a8948539755-21">21 Crayon-num" data-line="Crayon-5c891d40529a8948539755-23">23 Crayon-num" data-line="Crayon-5c891d40529a8948539755-25">25 Crayon-num" data-line="Crayon-5c891d40529a8948539755-27">27 Crayon-num" data-line="Crayon-5c891d40529a8948539755-29">29 Crayon-num" data-line="Crayon-5c891d40529a8948539755-31">31 Crayon-num" data-line="Crayon-5c891d40529a8948539755-33">33 Crayon-num" data-line="Crayon-5c891d40529a8948539755-35">35 Crayon-num" data-line="Crayon-5c891d40529a8948539755-37">37 Crayon-num" data-line="Crayon-5c891d40529a8948539755-39">39 | Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-2">Crayon-h">Crayon-v">positionCrayon-o">:Crayon-v">relativeCrayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-3">Crayon-h">Crayon-v">heightCrayon-o">:Crayon-cn">340pxCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-4">Crayon-h">Crayon-v">marginCrayon-o">:Crayon-h"> Crayon-cn">10pxCrayon-h"> Crayon-i">autoCrayon-h"> Crayon-cn">0Crayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-5">Crayon-sy">} Crayon-line" id="Crayon-5c891d40529a8948539755-7">Crayon-h">Crayon-v">positionCrayon-o">:Crayon-v">absoluteCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-8">Crayon-h">Crayon-v">colorCrayon-o">:Crayon-h"> Crayon-p">#fff; Crayon-line" id="Crayon-5c891d40529a8948539755-9">Crayon-h">Crayon-v">textCrayon-o">-Crayon-v">alignCrayon-o">:Crayon-h"> Crayon-v">centerCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-10">Crayon-h">Crayon-v">textCrayon-o">-Crayon-v">overflowCrayon-o">:Crayon-h"> Crayon-v">ellipsisCrayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-11">Crayon-h">Crayon-v">whitewhiteCrayon-o">-Crayon-v">spaceCrayon-o">:Crayon-h"> Crayon-v">NowrapCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-12">Crayon-h">Crayon-v">topCrayon-o">:Crayon-cn">0pxCrayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-13">Crayon-h">Crayon-v">leftCrayon-o">:Crayon-cn">0pxCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-14">Crayon-h">Crayon-v">paddingCrayon-o">:Crayon-h"> Crayon-cn">3pxCrayon-h"> Crayon-cn">5pxCrayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-15">Crayon-h">Crayon-v">borderCrayon-o">:Crayon-h"> Crayon-v">noneCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-18">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#d02f53; Crayon-line" id="Crayon-5c891d40529a8948539755-19">Crayon-h">Crayon-v">displayCrayon-o">:Crayon-h"> Crayon-v">blockCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-22">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#666; Crayon-line" id="Crayon-5c891d40529a8948539755-23">Crayon-h">Crayon-v">borderCrayon-o">-Crayon-v">radiusCrayon-o">:Crayon-h"> Crayon-cn">3pxCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-24">Crayon-h">Crayon-v">displayCrayon-o">:Crayon-h"> Crayon-v">inlineCrayon-o">-Crayon-v">blockCrayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-25">Crayon-h">Crayon-v">lineCrayon-o">-Crayon-v">heightCrayon-o">:Crayon-h"> Crayon-cn">18pxCrayon-sy">; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-26">Crayon-h">Crayon-v">marginCrayon-o">:Crayon-h"> Crayon-cn">0Crayon-h"> Crayon-cn">10pxCrayon-h"> Crayon-cn">15pxCrayon-h"> Crayon-cn">0Crayon-sy">; Crayon-line" id="Crayon-5c891d40529a8948539755-27">Crayon-sy">} Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-28">Crayon-p">#tag_cloud-2 a:nth-child(2n) { Crayon-line" id="Crayon-5c891d40529a8948539755-29">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#d1a601; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-32">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#286c4a; Crayon-line" id="Crayon-5c891d40529a8948539755-33">Crayon-sy">} Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-34">Crayon-p">#tag_cloud-2 a:nth-child(5n) { Crayon-line" id="Crayon-5c891d40529a8948539755-35">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#518ab2; Crayon-line Crayon-Striped-line" id="Crayon-5c891d40529a8948539755-38">Crayon-h">Crayon-v">BACkgroundCrayon-o">:Crayon-h"> Crayon-p">#c91d13; Crayon-line" id="Crayon-5c891d40529a8948539755-39">Crayon-sy">} |
4. 修改对应选择器名称
比较麻烦点的是，其中 #tag_cloud-2 需根据不同情况加以修改，比如查看标签云小工具的网页源代码显示的是：
| Crayon-nums " data-setTings="show"> | Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891d40529a9269424780-1">Crayon-o">Crayon-e">aside Crayon-v">idCrayon-o">=Crayon-s">"tag_cloud-3"Crayon-h"> Crayon-t">classCrayon-o">=Crayon-s">"widget widget_tag_cloud" |
需要将 #tag_cloud-2 修改为 #tag_cloud-3，同时将3d.js中的 tag_cloud-2 也改为 tag_cloud-3 。
这个3D旋转标签云本身是支持低版本IE的，不过本例中配套的样式使用了CSS3特效，所以在低版本IE上标签背影色会不显示。
以上是大佬教程为你收集整理的JS方法实现WordPress旋转3D标签云全部内容，希望文章能够帮你解决JS方法实现WordPress旋转3D标签云所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。