Chase Down My Dream

话说Tag Cloud的flash版，浮云是浮云，可是由于flash的先天因素，必然导致页面加载很慢。当时移植flash Tag Cloud的时候也恰巧看见了一篇很有意思的文章 Exploring 3D in Flash，讲述如何呈现3D效果，估摸着可以用jQuery之类的实现一下。同样对jQuery已经生疏了，只能边搜资料边写写看。折腾了半天，实现了右边贴图的效果。很神奇，正在头痛如何优化时，发现了比较类似的实现:
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大小和透明度。