Jquery 3D spherical navigation document classification

A few days ago I wrote the article category of the 3D spherical navigation on the left. Here I will make a simple record of the Implementation Details.

Effect:
The category title displays a 3D spherical effect. When you click the category title, a list of recommended articles corresponding to this category is displayed.
Effect:




HTML:
Copy codeThe Code is as follows:
<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 = "#"> effecect </a> </li>
</Ul>
</Div>

Core JS: dynamically generate a 3D spherical cloud + pop-up mode form-articlemap. js
Copy codeThe Code is as follows:
$ (Function (){
Var element = $ ('# list ');;
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"
((Elementpoliciuncs.css ("fontSize", size + "pt ");
Optional (elementpoliciuncs.css ("opacity", size/100 );
((Elementpoliciuncs.css ("zIndex", size );
Optional (elementpoliciuncs.css ("left", leftValue );
Optional (elementpoliciuncs.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 "effecect ":
Links = TrainLinks (Links. effecect );
Break;
}
CommonHelper. showNoBtnAlert (typName, links );
}
Function TrainLinks (arr ){
Var links = "This can be found, not yet! ";
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;
}

Auxiliary storage of the JS of the Recommendation article list (the recommended Article will be maintained by modifying this file in the future ):
Copy codeThe Code is as follows:
Var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "creating 50 superb animation effects tutorial"],
JavaScript :[
["Http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[original] AjaxControlToolkitTests one of the complete analysis of the Automatic Test Framework: Architecture"],
["Http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[original] AjaxControlToolkitTests automatic test framework completely resolved II: Implementation (1)"],
["Http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] optimizing performance with document. createDocumentFragment"],
],
Ajax: [],
Aspnet: [],
CSharp: [],
......
Performance :[
["Http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[recommended] Front-end performance analysis tool: dynaTrace Ajax Edition"]
]
}

Others:
The Dialog of jQuery UI and custom CSS settings are also referenced here. For details, refer to the instance.
Download source code