[JavaScript]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);            $(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（未來通過修改這個檔案來維護推薦文章）:

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", "[原創]AjaxControlToolkitTests自動化的測試架構完全解析之一：架構篇 "],    ["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原創]AjaxControlToolkitTests自動化的測試架構完全解析之二：實現篇(1) "],    ["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment最佳化效能 "],    ],    Ajax: [],    Aspnet: [],    CSharp: [],    ......    Performance: [    ["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推薦]前端效能分析工具：dynaTrace Ajax Edition"]    ]}

其他：

這裡還引用了jQuery UI的Dialog和一些自訂的CSS設定，具體參考執行個體即可。

下載原始碼：