jquery 3D球状导航的文章分类

前几天写了左边这个3D球状导航的文章分类，这里对实现细节做个简单记录。
效果：
分类标题呈现3D球状效果，点击分类标题的时候，会弹出这个分类对应的推荐文章列表。
效果截图：


HTML：

<div id=”mainList”>
<div id=”list”>
<ul>
<li><a class=”HTML” onclick=”ClickLink(this)” href=”#”>HTML</a></li>
<li><a class=”CSS” onclick=”ClickLink(this)” href=”#”>CSS</a></li>
<li><a class=”JS” onclick=”ClickLink(this)” href=”#”>JavaScript</a></li>
<li><a class=”AJAX” onclick=”ClickLink(this)” href=”#”>Ajax</a></li>
<li><a class=”ASPNET” onclick=”ClickLink(this)” href=”#”>Asp.net</a></li>
<li><a class=”CSHARP” onclick=”ClickLink(this)” href=”#”>C#</a></li>
<li><a class=”DEBUG” onclick=”ClickLink(this)” href=”#”>Debugging</a></li>
<li><a class=”PERF” onclick=”ClickLink(this)” href=”#”>Performance</a></li>
<li><a class=”ARCHITERT” onclick=”ClickLink(this)” href=”#”>Architect</a></li>
</ul>
</div>

核心JS:动态生成3D球状云+弹出模式窗体-articlemap.js

$(function() {
var element = $(‘#list a’); ;
var offset = 0;
var stepping = 0.02;
var list = $(‘#list’);
var $list = $(list)
$list.mousemove(function(e) {
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY – topOfList) / listHeight * 0.2 – 0.1;
});
for (var i = element.length – 1; i >= 0; i–) {
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 50);
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(15 – Math.sin(angle) * 15);
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 / 100);