jquery 3D球形导航的文章分类

前几天写了左边3D球面导航的文章分类。在这里，我简单记录了一下实现细节。效果：分类标题呈现3D球形效果。点击分类标题，会弹出该分类对应的推荐文章列表。效果截图：

HTML:复制代码代码如下： div id=' mainList ' div id=' list ' ul lia class=' HTML ' onclick='单击链接(this)' href=' # ' HTML/a/Li lia class=' CSS ' onclick='单击链接(this)' href=' # ' CSS/a/Li lia class=' JS ' onclick='单击链接(this)' href=' # ' JavaScript/a/Li lia class=' AJAX ' onclick='单击链接(this)' href=' # '核心JS:动态生成三维(三维的缩写)球状云弹出模式窗体-articlemap.js复制代码代码如下： $(function(){ var element=$(' # list a ')；定义变量偏移量=0;定义变量步进=0.02;var list=$(' # list ')；var $ list=$(list)$ list。鼠标移动(函数(e){ var topflist=$ list。等式(0)).偏移量()。顶部var列表高度=$ list。height()stepping=(e . clienty-topo flist)/list height * 0.2-0.1；});for(var I=元素。长度-1；I=0；I-){ 0元素[i].数学* 2/元素。长度；} setInterval(render，50)；函数render(){ for(var I=element)。长度-1；I=0；i - ) { var angle=element[i].elemAngle偏移量；x=120数学. sin(角度)* 30;y=45数学. cos(角度)* 40;size=Math.round(15 - Math.sin(角度)* 15);var elementCenter=$(元素[i]).width()/2；var左值=($ list。width()/2)* x/100-元素中心)' px ' $(元素[I]).css('fontSize '，size ' pt ')；$(元素[i]).css(“”不透明度，大小/100);$(元素[i]).css('zIndex '，大小);$(元素[i]).css('left '，左值)；$(元素[i]).css('top '，y ' % ')；}偏移量=步进；} });函数单击链接(项目){ var typename=$(项目).text()；var link=null switch(typename){ case ' HTML ' : link=TrainLinks(link .HTML)；打破；案例CSS':链接=TrainLinks(链接. CSS)；打破；案例JavaScript':链接=TrainLinks(链接. JavaScript)；打破；案例Ajax':链接=TrainLinks(链接. Ajax)；打破；案例ASP.NET ' : link=TrainLinks(link .aspnet)；打破；案例c#':链接=TrainLinks(链接. CSharp)；打破；案例"调试":链接=训练链接（链接。调试);打破；案例"性能":链接=培训链接（链接。性能);打破；案例"架构师":链接=培训链接（链接。建筑师);打破；}常用助手。shownobtaltert(type name，links)；}函数训练链接(arr){ var link='这个可以有，暂时还没有!'；如果(arr。长度0){ link=' div ul '；} for (i=0，j=arr.lengthI jI){ link=' lia tart=' _ blank ' href=' arr[I][0]' ' arr[I][1]'/a/Li；} if(arr。长度0){ link='/ul/div '；}返回链接；} 辅助存储推荐文章列表的JS(未来通过修改这个文件来维护推荐文章): 复制代码代码如下： var Links={ HTML: []，CSS :[[' http://www。cn博客。com/justinw/archive/2010/06/16/1758922。html '，'制作50个超棒动画效果教程]]，JavaScript :[[' http://www。cn博客。com/justinw/archive/2009/11/27/1611728。html '，'[原创]AJaxcontrolToolkits自动测试框架完全解析之一：架构篇]，[' http://www。cn博客。com/justinw/archive/2009/11/30/1613391。html '，'[原创]AJaxcontrolToolkits自动测试框架完全解析之二：实现篇(1) ']，[' http://www。cn博客。com/justinw/archive/2009/12/02/1615382。html '，'[JavaScript]使用文件。创建文档片段优化性能]，]，Ajax: []，Aspnet: []，CSharp: []，性能：[' http://www。cn博客。com/justinw/archive/2009/11/26/1611397。html '，'[推荐]前端性能分析工具：dynaTrace Ajax Edition'] ] }其他：这里还引用了jQuery用户界面的对话和一些自定义的半铸钢钢性铸铁(铸造半钢)设置，具体参考实例即可。下载源代码