添加JS 可视化效果

sosng · Oct 21, 2014 · d2b9f0e · d2b9f0e
1 parent 7065c19
commit d2b9f0e
Show file tree

Hide file tree

Showing 7 changed files with 17,905 additions and 0 deletions.
diff --git a/frontend_knowledge/css/Hypertree.css b/frontend_knowledge/css/Hypertree.css
@@ -0,0 +1,3 @@
+#infovis-canvaswidget {
+  margin:25px 0 0 25px;
+}
diff --git a/frontend_knowledge/css/base.css b/frontend_knowledge/css/base.css
@@ -0,0 +1,132 @@
+html, body {
+    margin:0;
+    padding:0;
+    font-family: "Lucida Grande", Verdana;
+    font-size: 0.9em;
+    text-align: center;
+    background-color:#F2F2F2;
+}
+
+input, select {
+    font-size:0.9em;
+}
+
+table {
+    margin-top:-10px;
+    margin-left:7px;
+}
+
+h4 {
+    font-size:1.1em;
+    text-decoration:none;
+    font-weight:normal;
+    color:#23A4FF;
+}
+
+a {
+    color:#23A4FF;
+    text-decoration: none;
+}
+
+#container {
+    width: 1000px;
+    height: 600px;
+    margin:0 auto;
+    position:relative;
+}
+
+#left-container, 
+#right-container, 
+#center-container {
+    height:600px;
+    position:absolute;
+    top:0;
+}
+
+#left-container, #right-container {
+    width:200px;
+    color:#686c70;
+    text-align: left;
+    overflow: auto;
+    background-color:#fff;
+    background-repeat:no-repeat;
+    border-bottom:1px solid #ddd;
+}
+
+#left-container {
+    left:0;
+    background-image:url('col2.png');
+    background-position:center right;
+    border-left:1px solid #ddd;
+
+}
+
+#right-container {
+    right:0;
+    background-image:url('col1.png');
+    background-position:center left;
+    border-right:1px solid #ddd;
+}
+
+#right-container h4{
+    text-indent:8px;
+}
+
+#center-container {
+    width:600px;
+    left:200px;
+    background-color:#1a1a1a;
+    color:#ccc;
+}
+
+.text {
+    margin: 7px;
+}
+
+#inner-details {
+    font-size:0.8em;
+    list-style:none;
+    margin:7px;
+}
+
+#log {
+    position:absolute;
+    top:10px;
+    font-size:1.0em;
+    font-weight:bold;
+    color:#23A4FF;
+}
+
+
+#infovis {
+    position:relative;
+    width:600px;
+    height:600px;
+    margin:auto;
+    overflow:hidden;
+}
+
+/*TOOLTIPS*/
+.tip {
+    color: #111;
+    width: 139px;
+    background-color: white;
+    border:1px solid #ccc;
+    -moz-box-shadow:#555 2px 2px 8px;
+    -webkit-box-shadow:#555 2px 2px 8px;
+    -o-box-shadow:#555 2px 2px 8px;
+    box-shadow:#555 2px 2px 8px;
+    opacity:0.9;
+    filter:alpha(opacity=90);
+    font-size:10px;
+    font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
+    padding:7px;
+}
+
+#disqus_container{
+    margin-top: 20px;
+}
+#disqus_container a{
+    font-size: 22px;
+    color: red;
+}
diff --git a/frontend_knowledge/css/col1.png b/frontend_knowledge/css/col1.png
diff --git a/frontend_knowledge/css/col2.png b/frontend_knowledge/css/col2.png
diff --git a/frontend_knowledge/index.html b/frontend_knowledge/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>前端知识结构图</title>
+
+<!-- CSS Files -->
+<link type="text/css" href="css/base.css" rel="stylesheet" />
+<link type="text/css" href="css/Hypertree.css" rel="stylesheet" />
+
+<!-- JIT Library File -->
+<script language="javascript" type="text/javascript" src="js/jit.js"></script>
+
+<!-- Example File -->
+<script language="javascript" type="text/javascript" src="js/script.js"></script>
+</head>
+
+<body onload="init();">
+	<div id="container">
+		<div id="left-container">
+		    <div class="text">
+			    <h4>
+					前端知识结构图  
+			    </h4> 
+		        这是一个前端知识结构图。<br /><br />
+		        点击一个节点，可以将这个节点移动到中央查看。<br /><br />
+		        此外中央节点的关系也可以从右侧的列表中查看。<br /><br />
+		        <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>
+                <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 />
+		        <a href="https://github.com/JacksonTian/fks" target="_blank">项目来源</a>		        
+		    </div>
+		    <div id="id-list"></div>
+		</div>
+		<div id="center-container">
+		    <div id="infovis"></div>    
+		</div>
+		<div id="right-container">
+			<div id="inner-details"></div>
+		</div>
+		<div id="log"></div>
+	</div>
+
+	<div id="disqus_container">
+	    <a href="javascript:void(0);" onclick="toggleDuoshuoComments('#comment-box', '前端知识结构图', 'http://siberiawolf.com/frontend_knowledge/index.html');">点击查看评论</a>
+	    <div id="comment-box"></div>
+  	</div> 
+	<script src="http://libs.baidu.com/jquery/2.0.2/jquery.min.js"></script>
+	<!-- 多说公共JS代码 start -->
+	<script>var duoshuoQuery = {short_name:"siberiawolf"};</script>
+	<script src="http://static.duoshuo.com/embed.js"></script>
+	<!-- 多说公共JS代码 end -->
+</body>
+</html>