Skip to content

Commit d2b9f0e

Browse files
author
siberiawolf
committed
添加JS 可视化效果
1 parent 7065c19 commit d2b9f0e

File tree

7 files changed

+17905
-0
lines changed

7 files changed

+17905
-0
lines changed

‎frontend_knowledge/css/Hypertree.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#infovis-canvaswidget {
2+
margin:25px 0 0 25px;
3+
}

‎frontend_knowledge/css/base.css

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
html, body {
2+
margin:0;
3+
padding:0;
4+
font-family: "Lucida Grande", Verdana;
5+
font-size: 0.9em;
6+
text-align: center;
7+
background-color:#F2F2F2;
8+
}
9+
10+
input, select {
11+
font-size:0.9em;
12+
}
13+
14+
table {
15+
margin-top:-10px;
16+
margin-left:7px;
17+
}
18+
19+
h4 {
20+
font-size:1.1em;
21+
text-decoration:none;
22+
font-weight:normal;
23+
color:#23A4FF;
24+
}
25+
26+
a {
27+
color:#23A4FF;
28+
text-decoration: none;
29+
}
30+
31+
#container {
32+
width: 1000px;
33+
height: 600px;
34+
margin:0 auto;
35+
position:relative;
36+
}
37+
38+
#left-container,
39+
#right-container,
40+
#center-container {
41+
height:600px;
42+
position:absolute;
43+
top:0;
44+
}
45+
46+
#left-container, #right-container {
47+
width:200px;
48+
color:#686c70;
49+
text-align: left;
50+
overflow: auto;
51+
background-color:#fff;
52+
background-repeat:no-repeat;
53+
border-bottom:1px solid #ddd;
54+
}
55+
56+
#left-container {
57+
left:0;
58+
background-image:url('col2.png');
59+
background-position:center right;
60+
border-left:1px solid #ddd;
61+
62+
}
63+
64+
#right-container {
65+
right:0;
66+
background-image:url('col1.png');
67+
background-position:center left;
68+
border-right:1px solid #ddd;
69+
}
70+
71+
#right-container h4{
72+
text-indent:8px;
73+
}
74+
75+
#center-container {
76+
width:600px;
77+
left:200px;
78+
background-color:#1a1a1a;
79+
color:#ccc;
80+
}
81+
82+
.text {
83+
margin: 7px;
84+
}
85+
86+
#inner-details {
87+
font-size:0.8em;
88+
list-style:none;
89+
margin:7px;
90+
}
91+
92+
#log {
93+
position:absolute;
94+
top:10px;
95+
font-size:1.0em;
96+
font-weight:bold;
97+
color:#23A4FF;
98+
}
99+
100+
101+
#infovis {
102+
position:relative;
103+
width:600px;
104+
height:600px;
105+
margin:auto;
106+
overflow:hidden;
107+
}
108+
109+
/*TOOLTIPS*/
110+
.tip {
111+
color: #111;
112+
width: 139px;
113+
background-color: white;
114+
border:1px solid #ccc;
115+
-moz-box-shadow:#555 2px 2px 8px;
116+
-webkit-box-shadow:#555 2px 2px 8px;
117+
-o-box-shadow:#555 2px 2px 8px;
118+
box-shadow:#555 2px 2px 8px;
119+
opacity:0.9;
120+
filter:alpha(opacity=90);
121+
font-size:10px;
122+
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
123+
padding:7px;
124+
}
125+
126+
#disqus_container{
127+
margin-top: 20px;
128+
}
129+
#disqus_container a{
130+
font-size: 22px;
131+
color: red;
132+
}

‎frontend_knowledge/css/col1.png

4.12 KB
Loading

‎frontend_knowledge/css/col2.png

4.14 KB
Loading

‎frontend_knowledge/index.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5+
<title>前端知识结构图</title>
6+
7+
<!-- CSS Files -->
8+
<link type="text/css" href="css/base.css" rel="stylesheet" />
9+
<link type="text/css" href="css/Hypertree.css" rel="stylesheet" />
10+
11+
<!-- JIT Library File -->
12+
<script language="javascript" type="text/javascript" src="js/jit.js"></script>
13+
14+
<!-- Example File -->
15+
<script language="javascript" type="text/javascript" src="js/script.js"></script>
16+
</head>
17+
18+
<body onload="init();">
19+
<div id="container">
20+
<div id="left-container">
21+
<div class="text">
22+
<h4>
23+
前端知识结构图
24+
</h4>
25+
这是一个前端知识结构图。<br /><br />
26+
点击一个节点，可以将这个节点移动到中央查看。<br /><br />
27+
此外中央节点的关系也可以从右侧的列表中查看。<br /><br />
28+
<iframe src="http://ghbtns.com/github-btn.html?user=siberiawolf&repo=siberiawolf.github.io&type=watch" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe>
29+
<iframe src="http://ghbtns.com/github-btn.html?user=siberiawolf&repo=siberiawolf.github.io&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="60" height="20"></iframe><br /><br />
30+
<a href="https://github.com/JacksonTian/fks" target="_blank">项目来源</a>
31+
</div>
32+
<div id="id-list"></div>
33+
</div>
34+
<div id="center-container">
35+
<div id="infovis"></div>
36+
</div>
37+
<div id="right-container">
38+
<div id="inner-details"></div>
39+
</div>
40+
<div id="log"></div>
41+
</div>
42+
43+
<div id="disqus_container">
44+
<a href="javascript:void(0);" onclick="toggleDuoshuoComments('#comment-box', '前端知识结构图', 'http://siberiawolf.com/frontend_knowledge/index.html');">点击查看评论</a>
45+
<div id="comment-box"></div>
46+
</div>
47+
<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
48+
<!-- 多说公共JS代码 start -->
49+
<script>var duoshuoQuery = {short_name:"siberiawolf"};</script>
50+
<script src="http://static.duoshuo.com/embed.js"></script>
51+
<!-- 多说公共JS代码 end -->
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)