效果：
分类标题呈现3D球状效果，点击分类标题的时候，会弹出这个分类对应的推荐文章列表。
效果截图：
HTML：
01 <div id="mainList">
02 <div id="list">
03 <ul>
04 <li><a class="HTML" onclick="ClickLink(this)" href="#">HTML</a></li>
05 <li><a class="CSS" onclick="ClickLink(this)" href="#">CSS</a></li>
06 <li><a class="JS" onclick="ClickLink(this)" href="#">JavaScript</a></li>
07 <li><a class="AJAX" onclick="ClickLink(this)" href="#">Ajax</a></li>
08 <li><a class="ASPNET" onclick="ClickLink(this)" href="#">Asp.net</a></li>
09 <li><a class="CSHARP" onclick="ClickLink(this)" href="#">C#</a></li>
10 <li><a class="DEBUG" onclick="ClickLink(this)" href="#">Debugging</a></li>
11 <li><a class="PERF" onclick="ClickLink(this)" href="#">Performance</a></li>
12 <li><a class="ARCHITERT" onclick="ClickLink(this)" href="#">Architect</a></li>
13 </ul>
14 </div>
核心JS:动态生成3D球状云+弹出模式窗体-articlemap.js
01 $(function() {
02
03 var element = $('#list a'); ;
04 var offset = 0;
05 var stepping = 0.02;
06 var list = $('#list');
07 var $list = $(list)
08
09 $list.mousemove(function(e) {
10 var topOfList = $list.eq(0).offset().top
11 var listHeight = $list.height()
12 stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
13
14 });
15
16 for (var i = element.length - 1; i >= 0; i--) {
17 element[i].elemAngle = i * Math.PI * 2 / element.length;
18 }
19
20 setInterval(render, 50);
21
22 function render() {
23 for (var i = element.length - 1; i >= 0; i--) {
24
25 var angle = element[i].elemAngle + offset;
26
27 x = 120 + Math.sin(angle) * 30;
28 y = 45 + Math.cos(angle) * 40;
29 size = Math.round(15 - Math.sin(angle) * 15);
30
31 var elementCenter = $(element[i]).width() / 2;
32
33 var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
34
35 $(element[i]).css("fontSize", size + "pt");
36 $(element[i]).css("opacity", size / 100);
37 $(element[i]).css("zIndex", size);
38 $(element[i]).css("left", leftValue);
39 $(element[i]).css("top", y + "%");
40 }
41
42 offset += stepping;
43 }
44
45 });
46
47 function ClickLink(item) {
48 var typName = $(item).text();
49
50 var links = null;
51
52 switch (typName) {
53 case "HTML":
54 links = TrainLinks(Links.HTML);
55 break;
56 case "CSS":
57 links = TrainLinks(Links.CSS);
58 break;
59 case "JavaScript":
60 links = TrainLinks(Links.JavaScript);
61 break;
62 case "Ajax":
63 links = TrainLinks(Links.Ajax);
64 break;
65 case "Asp.net":
66 links = TrainLinks(Links.Aspnet);
67 break;
68 case "C#":
69 links = TrainLinks(Links.CSharp);
70 break;
71 case "Debugging":
72 links = TrainLinks(Links.Debugging);
73 break;
74 case "Performance":
75 links = TrainLinks(Links.Performance);
76 break;
77 case "Architect":
78 links = TrainLinks(Links.Architect);
79 break;
80 }
81
82 CommonHelper.showNoBtnAlert(typName, links);
83 }
84
85 function TrainLinks(arr) {
86 var links = "这个可以有，暂时还没有！";
87 if (arr.length > 0) {
88 links = '<div><ul>';
89 }
90 for (i = 0, j = arr.length; i < j; i++) {
91 links += '<li><a target="_blank" href="' + arr[i][0] + '">' + arr[i][1] + '</a></li>';
92 }
93 if (arr.length > 0) {
94 links += '</ul></div>';
95 }
96
97 return links;
98 }
辅助存储推荐文章列表的JS（未来通过修改这个文件来维护推荐文章）:
01 var Links = {
02 HTML: [],
03 CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", "制作50个超棒动画效果教程"]],
04 JavaScript: [
05 ["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[原创]AjaxControlToolkitTests自动测试框架完全解析之一：架构篇 "],
06 ["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[原创]AjaxControlToolkitTests自动测试框架完全解析之二：实现篇(1) "],
07 ["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] 使用document.createDocumentFragment优化性能 "],
08 ],
09 Ajax: [],
10 Aspnet: [],
11 CSharp: [],
12 ......
13 Performance: [
14 ["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[推荐]前端性能分析工具：dynaTrace Ajax Edition"]
15 ]
16 }
其他：
这里还引用了jQuery UI的Dialog和一些自定义的CSS设置，具体参考实例即可
本文示例源代码或素材下载