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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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 Ubb代码编辑器函数代码
2012/07/05 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
JavaScript的目的分析
2007/01/05 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
javascript实现删除前弹出确认框
2015/06/04 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
js实现tab切换效果
2017/02/16 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
跟老齐学Python之做一个小游戏
2014/09/28 Python
python比较2个xml内容的方法
2015/05/11 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
办理暂住证介绍信
2014/01/11 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
驾驶员管理制度范本
2015/08/06 职场文书