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 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
JS实现炫酷轮播图
Nov 15 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php格式化时间戳
2016/12/17 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
js实现文字滚动效果
2016/03/03 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
js继承实现方法详解
2016/12/16 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
简单介绍Python中的round()方法
2015/05/15 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
详解Python_shutil模块
2019/03/15 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
python绘制玫瑰的实现代码
2020/03/02 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
航空大学应届生求职信
2013/11/10 职场文书
法律六进活动方案
2014/03/13 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
2015年财务部工作总结
2015/04/10 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle