效果：
分类标题呈现3d球状效果，点击分类标题的时候，会弹出这个分类对应的推荐文章列表。
效果截图：
html：
复制代码 代码如下:
html
css
javascript
ajax
asp.net
c#
debugging
performance
architect
核心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 = '';
}
for (i = 0, j = arr.length; i links += '' + arr[i][1] + '';
}
if (arr.length > 0) {
links += '
';
}
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设置，具体参考实例即可。
下载源代码