jquery 3D球狀導(dǎo)航的文章分類

更新時間：2010年07月06日 16:02:45 作者：

分類標(biāo)題呈現(xiàn)3D球狀效果，點擊分類標(biāo)題的時候，會彈出這個分類對應(yīng)的推薦文章列表。

前幾天寫了左邊這個3D球狀導(dǎo)航的文章分類，這里對實現(xiàn)細(xì)節(jié)做個簡單記錄。

效果：
分類標(biāo)題呈現(xiàn)3D球狀效果，點擊分類標(biāo)題的時候，會彈出這個分類對應(yīng)的推薦文章列表。
效果截圖：

HTML：

復(fù)制代碼代碼如下:

 
<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:動態(tài)生成3D球狀云+彈出模式窗體-articlemap.js

復(fù)制代碼代碼如下:

 
$(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); 
$(element[i]).css("zIndex", size); 
$(element[i]).css("left", leftValue); 
$(element[i]).css("top", y + "%"); 
} 
offset += stepping; 
} 
}); 
function ClickLink(item) { 
var typName = $(item).text(); 
var links = null; 
switch (typName) { 
case "HTML": 
links = TrainLinks(Links.HTML); 
break; 
case "CSS": 
links = TrainLinks(Links.CSS); 
break; 
case "JavaScript": 
links = TrainLinks(Links.JavaScript); 
break; 
case "Ajax": 
links = TrainLinks(Links.Ajax); 
break; 
case "Asp.net": 
links = TrainLinks(Links.Aspnet); 
break; 
case "C#": 
links = TrainLinks(Links.CSharp); 
break; 
case "Debugging": 
links = TrainLinks(Links.Debugging); 
break; 
case "Performance": 
links = TrainLinks(Links.Performance); 
break; 
case "Architect": 
links = TrainLinks(Links.Architect); 
break; 
} 
CommonHelper.showNoBtnAlert(typName, links); 
} 
function TrainLinks(arr) { 
var links = "這個可以有，暫時還沒有！"; 
if (arr.length > 0) { 
links = '<div><ul>'; 
} 
for (i = 0, j = arr.length; i < j; i++) { 
links += '<li><a target="_blank" href="' + arr[i][0] + '">' + arr[i][1] + '</a></li>'; 
} 
if (arr.length > 0) { 
links += '</ul></div>'; 
} 
return links; 
} 

輔助存儲推薦文章列表的JS（未來通過修改這個文件來維護推薦文章）:

復(fù)制代碼代碼如下:

 
var Links = { 
HTML: [], 
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "制作50個超棒動畫效果教程"]], 
JavaScript: [ 
["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之一：架構(gòu)篇 "], 
["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原創(chuàng)]AjaxControlToolkitTests自動測試框架完全解析之二：實現(xiàn)篇(1) "], 
["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment優(yōu)化性能 "], 
], 
Ajax: [], 
Aspnet: [], 
CSharp: [], 
...... 
Performance: [ 
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推薦]前端性能分析工具：dynaTrace Ajax Edition"] 
] 
} 