[JavaScript] Article classification of 3D spherical navigation

I wrote about the 3D ball navigation on the left a few days ago.ArticleClassification. Here we will make a simple record of 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:

<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

$ (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;} s Etinterval (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" watermark (element1_i1_0000.css ("fontsize", size +" PT "); Round (" opacity ", size/100); Round (element1_i00000000.css (" zindex ", size); Round (" Left ", leftvalue); Limit (element1_i00000000.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": Lin Ks = 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. revoke ect); break;} commo Nhelper. 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 JS (In the future, we will modify this file to maintain recommended articles.):

 
VaR links = {HTML: [], CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "create 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] use document. createdocumentfragment optimizes performance "],], 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.

DownloadSource code: