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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
jquery分割字符串的方法
Jun 24 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
解决angularjs WdatePicker ng-model的问题
Sep 13 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获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
PHP静态成员变量
2017/02/14 PHP
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
npm qs模块使用详解
2020/02/07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Series和DataFrame使用简单入门
2019/11/13 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
win10安装python3.6的常见问题
2020/07/01 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
IRO美国官网:法国服装品牌
2018/03/06 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
初一英语教学反思
2014/01/11 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书