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

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

效果:
分类标题呈现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设置,具体参考实例即可。
下载源代码

时间: 2022-12-15

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

jQuery三级下拉列表导航菜单代码分享_jquery

本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

jQuery网页定位导航特效实现方法_jquery

本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加

jQuery垂直多级导航菜单代码分享_jquery

这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

jquery动感漂浮导航菜单代码分享_jquery

这是一款基于jquery实现动感漂浮导航菜单的特效代码,菜单可以上下浮动,动感十足,为自己的网站增加了活力,是一款非常实用的导航菜单特效源码. 运行效果图: 点击下载源码 为大家分享的jquery动感漂浮导航菜单代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery Floating Menu<

免费资源:7个效果非常棒的jQuery 3D效果插件

这是一篇有关jQuery 3D效果实现的文章,对应Web开发人员来说,写更少的东西,实现更多的内容是非常幸福的事情,对应js来说,jQuery 就是为我们这样服务的,使用jQuery你可以用很少的代码轻松实现本来需要很多代码的程序应用,包括Web 3D效果. 1. Flip HTML content in 3D 2. Agile Carousel 3. Rotation 4. Tag Cloud 5. Sphere 6. Flip! 7. Faux 3D Effect via: 7 Amazin

jQuery模仿京东/天猫商品左侧分类导航菜单效果_jquery

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <

jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果_jquery

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码 先看下jquery仿京东导航效果: 前端html代码如下: 复制代码 代码如下: <ul> <li><a href="#">baidu</a></li> <div

jquery实现向下滑出的二级导航下滑菜单效果_jquery

本文实例讲述了jquery实现向下滑出的二级导航下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款由jQuery配合JavaScript来共同实现的网页上的下滑菜单特效,带颜色的是一级主菜单,点击后会展开向上滑出二级的子菜单,再次点击主菜单,会合拢子菜单,就菜单所能展现的功能来说,适用于企业网站产品分类.新闻类文章栏目导航等,目前本款菜单支持两级,有兴趣的可自己扩展更多级的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery

jQuery实现的导航条切换可显示隐藏_jquery

用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航条在项目中的应用</title> <script language="javascript" type="