码迷,mamicode.com
首页 > Web开发 > 详细

js-graph-it的一个小demo

时间:2015-06-15 14:38:26      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:html js-graph-it   页面开发   web   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">


<script type="text/javascript" src="js-graph-it.js"></script>
<link rel="stylesheet" type="text/css" href="js-graph-it.css" />
<link rel="stylesheet" type="text/css" href="sf-homepage.css" />
<script>
function onLoad(){
resizeCanvas();
initPageObjects();
}
/**
* Resizes the main canvas to the maximum visible height.
*/
function resizeCanvas()
{
var divElement = document.getElementById("mainCanvas");
var screenHeight = window.innerHeight || document.body.offsetHeight;
divElement.style.height = (screenHeight - 16) + "px";
}


</script>
 </head>


 <body onload="onLoad()">
<div id="mainCanvas" class="canvas" style="width: 100%; height: 500px;">
<!-- h1和h2两个对象 -->
<h1 id="aaa" class="block draggable" style="left: 30px; top: 30px;">aaaa</h1>
<h2 id="one" class="block draggable" style="left: 130px; top: 130px;">one</h2>
<!--连接两个对象的连接线,用css来表示,up_start;down_start;right_start;left_start-->
<div class="connector aaa one down_start">
<img class="connector-end" src="arrow.gif">
</div>


<!--表示有两条线要从这个对象出去,连接不同的两的对象 -->
<div id="description2_block" class="block draggable" style="left: 350px; top: 300px; ">
totle
<div id="description2_out1" class="block dock_point" style="right: -2px; top: 20%;"></div>
<div id="description2_out2" class="block dock_point" style="right: -2px; top: 80%;"></div>
</div>


<div id="no_js_code_block" class="block draggable" style="left: 580px; top: 200px; ">
one
</div>

<div class="connector description2_out1 no_js_code_block right_start">
<img class="connector-end" src="arrow.gif">
</div>

<div id="drag_and_drop_block" class="block draggable" style="left: 580px; top: 340px; ">
two
</div>

<div class="connector description2_out2 drag_and_drop_block right_start">
<img class="connector-end" src="arrow.gif">
</div>


<!--两个对象的相互连接  -->
<div id="a" class="block draggable" style="left: 230px; top: 230px; ">
aaaaaa
<div id="a1" class="block dock_point" style="right: -2px; top: 20%;"></div>
<div id="a2" class="block dock_point" style="right: -2px; top: 80%;"></div>
</div>


<div id="b" class="block draggable" style="left: 330px; top: 330px; ">
bbbbbb
<div id="b1" class="block dock_point" style="left: -2px; top: 20%;"></div>
<div id="b2" class="block dock_point" style="left: -2px; top: 100%;"></div>
</div>

<div class="connector a1 b1 right_start">
<img class="connector-end" src="arrow.gif">
</div>


<div class="connector b2 a2 down_start">
<img class="connector-end" src="arrow.gif">
</div>

<p class="block" style="position: absolute; bottom: 2px; right: 2px;">tested on Internet Explorer 6, Mozilla Firefox 1.0 and 1.5, Opera 9.01</p>
</div>
 </body>
</html>

js-graph-it的一个小demo

标签:html js-graph-it   页面开发   web   

原文地址:http://blog.csdn.net/zmbc48/article/details/46503133

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!