[JavaScript]3D球状导航的文章分类

3D球状导航实现
最新推荐文章于 2022-07-25 16:52:28 发布
最新推荐文章于 2022-07-25 16:52:28 发布
阅读量378 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 ui javascript ViewUI
原文链接：https://yq.aliyun.com/articles/341395
本文介绍了一种利用HTML和JavaScript实现的3D球状导航效果，点击分类标题可弹出对应文章列表。通过动态调整元素位置和大小，形成3D球面布局。

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

效果：

分类标题呈现3D球状效果，点击分类标题的时候，会弹出这个分类对应的推荐文章列表。

效果截图：

2010070523342688.png2010070523584819.png

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
$( 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（未来通过修改这个文件来维护推荐文章）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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设置，具体参考实例即可。

下载源代码：下载源代码


本文转自Justin博客园博客，原文链接：http://www.cnblogs.com/justinw/archive/2010/07/06/1771759.html，如需转载请自行联系原作者

JS特效-3D翻转导航
10-29
一个非常酷炫的3D导航源代码，很好看，也简单。
[应用][js+css3]3D盒子导航[PC端]
03-22
CSS3构建的3D盒子的导航应用 1.在用css3构建的盒子表面，放上iframe，来加载导航页面。 2.鼠标左键按下移动可旋转盒子，寻找想要的网址。 3.左键单机盒子表面，将全屏现实所点盒子表面的网站[iframe中]，并可浏览，关闭后返回原来状态。 4.PC端，将额外现实2个css3做的旋转盒子[没什么意义] 注：原本打算排列导航盒子，这样的话导航也变得比较好玩 但是，如果使用iframe来显示网站预览的话，速度太慢，太耗内存 尝试过用html2canvas，但是由于跨域问题，直接被灭 解决方法：通过服务器返回较实时的网站预览图的方式显示
原生js+css3 实现3D导航栏实例
qiufengwuxiu的博客
04-09 887
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author"
JS实现悬浮导航(实用)
05-05
浏览网页时，滚动鼠标拉动网页后，导航不消失，悬浮于浏览器上。用户体验很好，实用性很强，很多知名网站在使用，前端学习者必会的技能。
3D球状旋转选择tag
lanrenxiaowen的博客
02-23 578
效果链接：http://download.youkuaiyun.com/download/lanrenxiaowen/10256077
纯css3-球形3d旋转-多图3d球形旋转
01-21
球形多图3d旋转，纯css3代码
FLASH导航菜单和导航动画和3d球体flash图片相册
05-18
FLASH导航菜单和导航动画和3d球体flash图片相册，超漂亮！
炫酷3D球形标签云
kongzhonghu的专栏
07-25 966
模拟将标签数据做成一个富勒烯球状的3D模型，然后鼠标放上去可以自己旋转起来，如果觉得还太单调可以自己设置好看的背景来填充，炫酷3D球形标签云。
非常漂亮的环形菜单
05-09
非常漂亮的环形菜单代码，需要的朋友拿去。
Android 3D圆形旋转菜单
02-10
Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单Android 3D圆形旋转菜单
Html+css+JavaScript实现的3D球面标签云效果
05-19
Html+css+JavaScript实现的3D球面标签云效果
超酷的HTML5/CSS3 3D气泡悬浮菜单
08-23
之前我们分享过各式各样的网页菜单，有基于jQuery的，也有基于HTML5和CSS3的，很多都比较炫酷和实用，比如这款jQuery 3D 垂直多级菜单就非常实用，还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单，每一个菜单项是一个个3D样式的悬浮气泡，点击菜单项后就可以激活当前菜单。
3d球形云标签代码
01-29
3d球形云标签代码，可根据鼠标变换角度，JS编写
js实现旋转的3D球体标签云
04-21
js实现旋转的3D球体标签云
CSS 3D实现旋转球
Within的博客
09-05 4486
直接上代码：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;zimv-css 3d ball&lt;/title&gt; &lt;/head&gt; &lt;style&gt; body{ padding: 100px 0 0 150px
基于threejs的3D室内导航项目
m0_49435789的博客
02-16 4045
基于threejs的室内导航项目。 这个项目主要有两部分构成：1.地图编辑器 2.客户端 可以实现地图的绘制以及导航路径规划，并且实现了地图坐标与经纬度的映射。 这个项目从头到尾是我自己一个人在独立开发，虽然还有很多缺陷和交互不完善的地方，但是基本实现了需求，后续结合公司的硬件可以实现实时导航，还是蛮有成就感的。
用JavaScript实现3D圣诞树的视觉效果
在当前的数字时代，利用JavaScript创建3D图形已经成为了一个热门的Web开发话题。特别是通过使用WebGL或者其封装库如three.js等技术，可以非常方便地在网页中实现3D效果。本知识点将详细介绍如何用JavaScript编写一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值