更新时间:2022-09-20 11:37:11
前几天写了左边这个3D球状导航的文章分类,这里对实现细节做个简单记录。
效果:
分类标题呈现3D球状效果,点击分类标题的时候,会弹出这个分类对应的推荐文章列表。
效果截图:
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,如需转载请自行联系原作者