<!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 οnlοad="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>
<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 οnlοad="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>
扫一扫
2076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
