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


Posted in Javascript onJuly 06, 2010

前几天写了左边这个3D球状导航的文章分类,这里对实现细节做个简单记录。

效果:
分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表。
效果截图:
jquery 3D球状导航的文章分类

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

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="#">Architect</a></li> 
</ul> 
</div>

核心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 = '<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; 
}

辅助存储推荐文章列表的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设置,具体参考实例即可。
下载源代码
Javascript 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 #Javascript
JavaScript经典效果集锦
Jul 06 #Javascript
前端开发必须知道的JS之原型和继承
Jul 06 #Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 #Javascript
一个基于jquery的图片切换效果
Jul 06 #Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 #Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 #Javascript
You might like
php生成过去100年下拉列表的方法
2015/07/20 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Maps Javascript
2007/01/22 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
python 接口返回的json字符串实例
2018/03/27 Python
详解django中使用定时任务的方法
2018/09/27 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
PHP开发的一般流程
2013/08/13 面试题
如何提高SQL Server的安全性
2016/07/25 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
酒店总经理助理职责
2014/02/12 职场文书
办公室副主任职责范本
2014/03/08 职场文书
交通事故调解协议书
2014/04/16 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
政风行风评议心得体会
2014/10/21 职场文书
计算机实训报告总结
2014/11/05 职场文书
搞笑老公保证书
2015/02/26 职场文书