How to Create a 3D Tag Cloud in jQuery 。剩下来就是弄到Micolog上的事情了。
讲讲在Micolog上怎么弄吧，其实就是把jQuery的脚本加到Tag输出那一段，稍微改一下样式就可以了。
显然是在sidebar.html中修改：
<li> <h2>Tags</h2> <div id="jTag"> <---添加id {% if tags %} {% for t in tags %} <a title="{{ t.tagcount }} topics" href="/tag/{{t.tag|urlencode}}" id="{{ t.tagcount|tagsize }}">{{t.tag}}</a> <---这里也改一下 {% endfor %} {% endif %} </div>
# 添加js脚本<script type="text/javascript">$(document).ready(function(){ var element = $('#jTag a'); var offset = 0; var stepping = 0.01; var list = $('#jTag'); var $list = $(list); $list.mousemove(function(e){ var topOfList = $list.eq(0).offset().top; var listHeight = $list.height(); var adjustH = 360; <---这个要根据页面实际情况调，主要就是让 var x=0.5; <---这个值主要是用来调整旋转速度的，越大越快 step = (e.clientY + adjustH - topOfList)/listHeight * 2 * x - x; }); for (var i = element.length - 1; i >= 0; i--) { element[i].elemAngle = i * Math.PI * 2 / element.length; } setInterval(render, 200); function render(){ for (var i = element.length - 1; i >= 0; i--){ var angle = element[i].elemAngle + offset; x = 120 + Math.sin(angle) * 30; y = 45 + Math.cos(angle) * 40; size = Math.round(6 - Math.sin(angle) * 6) + element[i].getAttribute("id")/2; <--- 获取popular程度 var elementCenter = $(element[i]).width() / 2; var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"; $(element[i]).css("fontSize", size + "pt"); $(element[i]).css("opacity",(size-6)/10); $(element[i]).css("zIndex" ,size); $(element[i]).css("left" ,leftValue); $(element[i]).css("top", y + "%"); } offset += step; }});</script></li>
在style.css中添加显示Tag Cloud的样式：
#jTag { font-family: Monospace, "宋体", sans-serif; margin:0 auto; height:216px; width:186px; <---高、宽参数根据实际显示效果调，会对脚本中adjustH有影响 overflow:hidden; position:relative; background-color: trans;}#jTag a{ list-style:none; margin:0; padding:0; position:absolute; text-decoration: none; color:#666;}#jTag a:hover{ color:#ccc;}
要把base.py中的tag输出个数调整一下，大概12~16个比较好。差点忘了，最好去http://ajax.googleapis.com/更新一个最新的jQuery.min.js。
这样就能让Tag Cloud动起来了。脚本基本就是在现成基础上改的，修改参数挺崩溃的，一开始传到网页上去发现只能往一个时针方向转，而且怎么也停不下来。当时调试了很久不知道怎么解决，在本地都是很正常的。昨晚看调试输出的时候，发现网页上获得的e.clientY值是相对的，于是导致了step这个值一直是负值，所以就总是朝一个方向转了。偷懒没有写支持IE的部分。。。这个版本自然比flash轻巧，能根据Popular程度不同改变Tag大小和透明度。
