js-graph-it的一个小demo
2015-06-15 14:06
495 查看
<!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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript所有数组方法（forEach,some,every,join,concat等等）
- JavaScript自动生成博文目录导航
- JavaScript更多内容
- HTML CSS JS（一）
- JS----Device.js 检测设备平台，操作系统的javascript
- 【原生js】js面向对象三大特征之继承笔记
- 简述JavaScript中正则表达式的使用方法
- JS函数arguments数组获得实际传参数个数
- 简介JavaScript中用于处理正切的Math.tan()方法
- Extjs2.2 获取PagingToolbar的当前页和总页数
- js 中的 prototype
- JavaScript中用于四舍五入的Math.round()方法讲解
- JavaScript中用于生成随机数的Math.random()方法
- jsapi_ticket定时获取类
- Extjs2.2 获取store中的totalProperty属性的值
- javascript 获取视口的高度和宽度
- JavaScript中的pow()方法使用详解
- js笔记
- JSON与XML的区别比较
- 在JavaScript中使用对数Math.log()方法的教程