A few days ago wrote the left side of this 3D ball navigation article classification, here a simple record of implementation details.
Effect:
The category title renders a 3D spherical effect, and when you click on the category title, a list of recommended articles for this category will pop up.
Screenshot of Effect:
Html:
Copy Code code 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= "#" >Architect</a></li>
</ul>
</div>
Core JS: Dynamically generate 3D Spherical cloud + pop-up mode form-articlemap.js
Copy Code code as follows:
$ (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 = Math.sin + (angle) * 30;
y = + 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 = "This can have, for the time being!" ";
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;
}
Secondary storage The recommended article List JS (future by modifying this file to maintain the recommended article):
Copy Code code as follows:
var Links = {
HTML: [],
CSS: [[http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html], "Make 50 awesome animation effects Tutorial"],
JavaScript: [
["Http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[Original]ajaxcontroltoolkittests Automatic test framework complete parsing one: Architecture Chapter "],
["Http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[Original]ajaxcontroltoolkittests automatic test framework fully resolved second: implementation of the article (1) "],
["Http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] Using Document.createdocumentfragment to optimize performance "],
],
Ajax: [],
Aspnet: [],
CSharp: [],
......
Performance: [
["Http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[recommended] Front-End Profiling Tools: DynaTrace Ajax Edition"]
]
}
Other:
This also refers to the jquery UI dialog and some custom CSS settings, specific reference examples can be.
Download source code
