[JavaScript]3D球状导航的文章分类
2010-07-06 00:02
295 查看
前几天写了左边这个3D球状导航的文章分类,这里对实现细节做个简单记录。
[b]效果:[/b]
分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表。
[b]效果截图:[/b]
[b]HTML:[/b]
[b]其他:[/b]
这里还引用了jQuery UI的Dialog和一些自定义的CSS设置,具体参考实例即可。
[b]下载源代码[/b]:
[b]效果:[/b]
分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表。
[b]效果截图:[/b]
[b]HTML:[/b]
[b]核心JS:动态生成3D球状云+弹出模式窗体-articlemap.js[/b]$(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; }
[b]辅助存储推荐文章列表的JS(未来通过修改这个文件来维护推荐文章):[/b]
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"]
]
}
[b]其他:[/b]
这里还引用了jQuery UI的Dialog和一些自定义的CSS设置,具体参考实例即可。
[b]下载源代码[/b]:
相关文章推荐
- jquery 3D球状导航的文章分类
- jquery 3D球状导航的文章分类
- 博客文章分类导航
- javascript仿京东导航左侧分类导航下拉菜单效果
- 使用文章分类做面包屑导航-函数实现
- ecshop文章侧边栏导航,自动调用文章多级栏目分类并且当前栏目及父栏目高亮显示
- 小波变换与图像处理文章的分类导航
- javascript仿京东导航左侧分类导航下拉菜单效果
- 根据<h*>标签JavaScript/jQuery自动生成文章目录(页面内导航)且平滑跳转
- ecshop文章侧边栏导航,自动调用文章多级子栏目分类并且当前栏目及父栏目高亮显示
- 利用HTML+JAVASCRIPT编写的判断IP地址合法性,并将其合法IP地址分类
- 记录一下JAVASCRIPT中多线程相关的几篇文章
- 【强烈强烈推荐】《ORACLE PL/SQL编程详细》--系列文章目录导航
- 发布文章时无刷新增加文章分类
- [原]javascript 仿3D球体旋转文本 不含透视
- 关于 ASPCMS中产品或文章使用分类TAG使用ASPCMS:CONTENT调用出错的解决方法
- Win10系列:JavaScript页面导航
- 仿淘宝、京东、美团使用ViewPager+GridView实现左右滑动查看更多分类导航功能
- 分类文章: 技能和嗜好
- JavaScript 3D球形标签云代码