基于web的拓扑图实现的小demo
2013-12-19 12:48
127 查看
研究了几天javascipt，真是个又老又奇怪又有用的语言。很想实现一个web上可用的拓扑，以前做过一点网管软件外围的web报表系统，有客户很想用浏览器来看topo图，并且希望在浏览器中就可以看到被管对象图示的告警闪烁，当时能做的就是摇头。个人认为桌面应用很多都能移植到web上，也能有很好的交互，虽然难度很大。受各式各样webGIS的启发，试着把topo搬到浏览器中，目前看来是完全可能的。最主要的还是实现拖拽和边界判定，至于数据可以使用ajax技术从服务端获取，服务端用什么都行j2ee,.net,php，怎么着都行。拖拽还是借鉴了netvibes的思路，链路使用VML是google
map的思路(FF下用svg)，目前只支持IE，FF的以后再说。
这里是一个简单客户端的demo截图，还有点样子吧。还存在大量的bug，功能也很有限，服务器端压根还没有写。
CODE:
<defaultTest.htm>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Topo ^-^</title>
<link rel="shortcut icon" href="favicon.ico" >
<link rel="stylesheet" type="text/css" href="style/styles.css?v=10" media="screen" />
<script>
var App = new Object();
</script>
<script src="js/util.js" type="text/javascript"></script>
<script src="js/dragTest.js" type="text/javascript"></script>
<script src="js/Drag.js" type="text/javascript"></script>
</head>
<body>
<div id="application">
<div id="modulesArea1" style="border:1px solid #000000; background: #cfcfcf; width: 400px; height:400px; position: absolute; left: 10px; top: 10px;">
<div id="modulesArea" style="border:1px solid #000000; background: #cfcfcf; width: 300px; height:300px; position: absolute; left: 50px; top: 50px;"></div>
</div>
</div>
<script>
var temp_container = document.getElementById("modulesArea");
var container = {
//容器对象
"container":temp_container,
//容器的绝对X,Y坐标(即以容器边框外边缘距为基准)
"AbsX":findPosX(temp_container),
"AbsY":findPosY(temp_container),
//容器的X,Y坐标(即以容器边框内边缘距为基准)
"X":findPosX(temp_container) + parseInt(temp_container.style.borderLeftWidth),
"Y":findPosY(temp_container) + parseInt(temp_container.style.borderTopWidth),
//容器的绝对宽、高(即包含容器边框)
"AbsWidth":temp_container.offsetWidth,
"AbsHeight":temp_container.offsetHeight,
//容器的宽、高(即不包含容器边框)
"Width":parseInt(temp_container.style.width),
"Height":parseInt(temp_container.style.height),
//容器的左右上下四个边框的宽度
"borderLeftWidth":parseInt(temp_container.style.borderLeftWidth),
"borderRightWidth":parseInt(temp_container.style.borderRightWidth),
"borderTopWidth":parseInt(temp_container.style.borderTopWidth),
"borderBottomWidth":parseInt(temp_container.style.borderBottomWidth),
//计算鼠标的坐标(以容器的边框内边缘左上角为原点)
"getMouseX":function(evClientX){
return evClientX-container.X;
},
"getMouseY":function(evClientY){
return evClientY-container.Y;
}
};
</script>
</body>
</html>
<js/Drag.js>
var Drag={
"obj":null,
"init":function(item){
// item: Div元素
item.onmousedown=Drag.start;
item.middleX=item.getX() + parseInt(item.offsetWidth)/2;
item.middleY=item.getY() + parseInt(item.offsetHeight)/2;
},
"start":function(ev){
// ev:事件
var item=Drag.obj=this;
ev=Drag.fixE(ev);
//记录鼠标单击时位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象相对与刚开始拖拽时所移动的相对距离。
item.setStartMouseX(ev.clientX);
item.setStartMouseY(ev.clientY);
//记录被拖拽对象刚开始拖拽时的位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象在拖拽过程中的位置。
item.setLastX();
item.setLastY();
item.setMiddleX();
item.setMiddleY();
item.onDragStart(item.getX(),item.getY(),item.getStartMouseX(),item.getStartMouseY());
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
"drag":function(ev){
// ev:事件
ev=Drag.fixE(ev);
var item=Drag.obj;
var currMouseX=container.getMouseX(ev.clientX);
var currMouseY=container.getMouseY(ev.clientY);
item.setX(currMouseX-item.getStartMouseX()+item.getLastX());
item.setY(currMouseY-item.getStartMouseY()+item.getLastY());
item.setMiddleX();
item.setMiddleY();
item.onDrag(item.getX(),item.getY(),currMouseX,currMouseY);
return false;
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.onDragEnd(Drag.obj.getX(),Drag.obj.getY());
Drag.obj=null;
},
"fixE":function(ev){
// ev:事件
if(typeof ev=="undefined")ev=window.event;
if(typeof ev.layerX=="undefined")ev.layerX=ev.offsetX;
if(typeof ev.layerY=="undefined")ev.layerY=ev.offsetY;
return ev;
}
};
<js/dragTest.js>
//
var _ZINDEX = 1000;
var _ZINDEX_MAX = 2147483647;
var _zindex = _ZINDEX;
function coordsX (x, dargObj){
var maxX = container.Width-dargObj.offsetWidth;
x = x<=0?0:x>=maxX?maxX:x;
return x;
}
function coordsY (y, dargObj){
var maxY = container.Height-dargObj.offsetHeight;
y = y<=0?0:y>=maxY?maxY:y;
return y;
}
App.Start = function() {
var dragDivs = new Array();
var lines = new Array();
for(var i = 0; i<10; i++){
dragDivs[i] = buildDragDiv(i,i*(35-i),i*(5+i),30,30,1,"#3A3A3A","#E0CB0E");
container.container.appendChild(dragDivs[i]);
Drag.init(dragDivs[i]);
lines[i] = buildLine(2,0,0,200,200,2,"green");
dragDivs[i].bindLine(lines[i],"from");
container.container.appendChild(lines[i]);
}
document.getElementById("application").style.display = "block";
}
// 构造被拖拽DIV对象
//
// id: DIV对象的唯一标识
// x: DIV对象的x坐标(以容器左上角为原点)
// y: DIV对象的y坐标(以容器左上角为原点)
// w: DIV对象宽度(不含边框)
// h: DIV对象高度(不含边框)
// bw: DIV对象边框的宽度
// bc: DIV对象边框的颜色
// bg: DIV对象的颜色(不含边框)
buildDragDiv = function(id,x,y,w,h,bw,bc,bg){
var item = document.createElement("div");
item.lineObjs = new Array();
item.id=id;
item.style.left=(isNaN(parseInt(x)) ? 0:x) + "px";
item.style.top=(isNaN(parseInt(y)) ? 0:y) + "px";
item.style.width=(isNaN(parseInt(w)) ? 0:w) + "px";
item.style.height=(isNaN(parseInt(h)) ? 0:h) + "px";
item.style.border=(isNaN(parseInt(bw)) ? 1:bw) + "px solid " + ((typeof(bg)=='undefined' || bg.length==0) ? "#3a3a3a":bc);
item.style.background=(typeof(bg)=='undefined' || bg.length==0) ? "#969696":bg;
item.style.cursor="move";
item.style.zIndex=_ZINDEX;
item.style.position = "absolute";
item.borderWidth=isNaN(parseInt(bw)) ? 1:bw;
item.middleX=parseInt(item.style.left) + parseInt(item.style.width)/2 + item.borderWidth;
item.middleY=parseInt(item.style.top) + parseInt(item.style.Height)/2 + item.borderWidth;
item.setMiddleX=function(){
item.middleX=item.getX() + item.offsetWidth/2;
}
item.getMiddleX=function(){
return item.middleX;
}
item.setMiddleY=function(){
item.middleY=item.getY() + item.offsetHeight/2;
}
item.getMiddleY=function(){
return item.middleY;
}
item.setX=function(x){
item.style.left=x + "px";
};
item.getX=function(){
return parseInt(item.style.left);
};
item.setY=function(y){
item.style.top=y + "px";
};
item.getY=function(){
return parseInt(item.style.top);
};
item.startMouseX=0;
item.startMouseY=0;
item.setStartMouseX=function(evClientX){
item.startMouseX=evClientX-container.X;
}
item.getStartMouseX=function(){
return item.startMouseX;
}
item.setStartMouseY=function(evClientY){
item.startMouseY=evClientY-container.Y;
}
item.getStartMouseY=function(){
return item.startMouseY;
}
item.lastX=0;
item.lastY=0;
item.setLastX=function(){
item.lastX=item.getX();
}
item.getLastX=function(){
return item.lastX;
}
item.setLastY=function(){
item.lastY=item.getY();
}
item.getLastY=function(){
return item.lastY;
}
item.setZIndex=function(z_Index){
item.style.zIndex=z_Index;
}
item.onDragStart=function(x,y,mousex, mousey) {
if(item.style.zIndex != _zindex || item.style.zIndex == _ZINDEX){
_zindex += 2;
item.setZIndex(_zindex);
for(var lineObj in this.lineObjs){
this.lineObjs[lineObj].line.style.zIndex=item.style.zIndex-1;
}
}
}
item.onDrag = function(x,y, mousex, mousey) {
this.setX(coordsX(x,this));
this.setY(coordsY(y,this));
item.setMiddleX();
item.setMiddleY();
for(var lineObj in this.lineObjs){
if(this.lineObjs[lineObj].point == "from"){
this.lineObjs[lineObj].line.from = this.getMiddleX() + "," + this.getMiddleY();
}else if(this.lineObjs[lineObj].point == "to"){
this.lineObjs[lineObj].line.to = this.getMiddleX() + "," + this.getMiddleY();
}
}
}
item.onDragEnd = function(x,y) {
this.isDragging = false;
}
item.bindLine=function(line,point){
var lineObj = new LineObj(line,point);
if(point=="from"){
lineObj.line.from=item.getMiddleX() + "," + item.getMiddleY();
}else if(point=="to") {
lineObj.line.to=item.getMiddleX() + "," + item.getMiddleY();
}
item.lineObjs.push(lineObj);
line.style.zIndex=item.style.zIndex-1;
}
return item;
}
LineObj = function(line,point){
this.line = line;
this.point =point;
}
buildLine = function(id,fromX,fromY,toX,toY,weight,color){
var line=document.createElement("v:line");
line.id=id;
line.style.position="absolute";
line.style.top="0px";
line.style.left="0px";
line.unselectable="on";
line.strokecolor=(typeof(color)=='undefined' || color.length==0) ? "#000000":color;
line.from = (isNaN(parseInt(fromX)) ? 0:fromX) + "," + (isNaN(parseInt(fromY)) ? 0:fromY);
line.to = (isNaN(parseInt(toX)) ? 0:toX) + "," + (isNaN(parseInt(toY)) ? 0:toY);
line.strokeweight=(isNaN(parseInt(weight)) ? 0:weight) + "pt";
line.fill=false;
line.filled=false;
line.getFrom=function(){
return line.from;
}
line.setFrom=function(x,y){
line.from=x + "," + y;
}
line.getTo=function(){
return line.to;
}
line.setTo=function(x,y){
line.to=x + "," + y;
}
return line;
}
window.onload = function() {
App.Start();
}
<js/util.js>
//寻找对象的绝对X坐标
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj.x) curleft += obj.x;
return curleft;
}
//寻找对象的绝对Y坐标
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) curtop += obj.y;
return curtop;
}
map的思路(FF下用svg)，目前只支持IE，FF的以后再说。
这里是一个简单客户端的demo截图，还有点样子吧。还存在大量的bug，功能也很有限，服务器端压根还没有写。
CODE:
<defaultTest.htm>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<STYLE>
v:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Topo ^-^</title>
<link rel="shortcut icon" href="favicon.ico" >
<link rel="stylesheet" type="text/css" href="style/styles.css?v=10" media="screen" />
<script>
var App = new Object();
</script>
<script src="js/util.js" type="text/javascript"></script>
<script src="js/dragTest.js" type="text/javascript"></script>
<script src="js/Drag.js" type="text/javascript"></script>
</head>
<body>
<div id="application">
<div id="modulesArea1" style="border:1px solid #000000; background: #cfcfcf; width: 400px; height:400px; position: absolute; left: 10px; top: 10px;">
<div id="modulesArea" style="border:1px solid #000000; background: #cfcfcf; width: 300px; height:300px; position: absolute; left: 50px; top: 50px;"></div>
</div>
</div>
<script>
var temp_container = document.getElementById("modulesArea");
var container = {
//容器对象
"container":temp_container,
//容器的绝对X,Y坐标(即以容器边框外边缘距为基准)
"AbsX":findPosX(temp_container),
"AbsY":findPosY(temp_container),
//容器的X,Y坐标(即以容器边框内边缘距为基准)
"X":findPosX(temp_container) + parseInt(temp_container.style.borderLeftWidth),
"Y":findPosY(temp_container) + parseInt(temp_container.style.borderTopWidth),
//容器的绝对宽、高(即包含容器边框)
"AbsWidth":temp_container.offsetWidth,
"AbsHeight":temp_container.offsetHeight,
//容器的宽、高(即不包含容器边框)
"Width":parseInt(temp_container.style.width),
"Height":parseInt(temp_container.style.height),
//容器的左右上下四个边框的宽度
"borderLeftWidth":parseInt(temp_container.style.borderLeftWidth),
"borderRightWidth":parseInt(temp_container.style.borderRightWidth),
"borderTopWidth":parseInt(temp_container.style.borderTopWidth),
"borderBottomWidth":parseInt(temp_container.style.borderBottomWidth),
//计算鼠标的坐标(以容器的边框内边缘左上角为原点)
"getMouseX":function(evClientX){
return evClientX-container.X;
},
"getMouseY":function(evClientY){
return evClientY-container.Y;
}
};
</script>
</body>
</html>
<js/Drag.js>
var Drag={
"obj":null,
"init":function(item){
// item: Div元素
item.onmousedown=Drag.start;
item.middleX=item.getX() + parseInt(item.offsetWidth)/2;
item.middleY=item.getY() + parseInt(item.offsetHeight)/2;
},
"start":function(ev){
// ev:事件
var item=Drag.obj=this;
ev=Drag.fixE(ev);
//记录鼠标单击时位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象相对与刚开始拖拽时所移动的相对距离。
item.setStartMouseX(ev.clientX);
item.setStartMouseY(ev.clientY);
//记录被拖拽对象刚开始拖拽时的位置，在一次完整的拖拽的过程中，这个值不变，用于计算被拖拽对象在拖拽过程中的位置。
item.setLastX();
item.setLastY();
item.setMiddleX();
item.setMiddleY();
item.onDragStart(item.getX(),item.getY(),item.getStartMouseX(),item.getStartMouseY());
document.onmousemove=Drag.drag;
document.onmouseup=Drag.end;
return false;
},
"drag":function(ev){
// ev:事件
ev=Drag.fixE(ev);
var item=Drag.obj;
var currMouseX=container.getMouseX(ev.clientX);
var currMouseY=container.getMouseY(ev.clientY);
item.setX(currMouseX-item.getStartMouseX()+item.getLastX());
item.setY(currMouseY-item.getStartMouseY()+item.getLastY());
item.setMiddleX();
item.setMiddleY();
item.onDrag(item.getX(),item.getY(),currMouseX,currMouseY);
return false;
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
Drag.obj.onDragEnd(Drag.obj.getX(),Drag.obj.getY());
Drag.obj=null;
},
"fixE":function(ev){
// ev:事件
if(typeof ev=="undefined")ev=window.event;
if(typeof ev.layerX=="undefined")ev.layerX=ev.offsetX;
if(typeof ev.layerY=="undefined")ev.layerY=ev.offsetY;
return ev;
}
};
<js/dragTest.js>
//
var _ZINDEX = 1000;
var _ZINDEX_MAX = 2147483647;
var _zindex = _ZINDEX;
function coordsX (x, dargObj){
var maxX = container.Width-dargObj.offsetWidth;
x = x<=0?0:x>=maxX?maxX:x;
return x;
}
function coordsY (y, dargObj){
var maxY = container.Height-dargObj.offsetHeight;
y = y<=0?0:y>=maxY?maxY:y;
return y;
}
App.Start = function() {
var dragDivs = new Array();
var lines = new Array();
for(var i = 0; i<10; i++){
dragDivs[i] = buildDragDiv(i,i*(35-i),i*(5+i),30,30,1,"#3A3A3A","#E0CB0E");
container.container.appendChild(dragDivs[i]);
Drag.init(dragDivs[i]);
lines[i] = buildLine(2,0,0,200,200,2,"green");
dragDivs[i].bindLine(lines[i],"from");
container.container.appendChild(lines[i]);
}
document.getElementById("application").style.display = "block";
}
// 构造被拖拽DIV对象
//
// id: DIV对象的唯一标识
// x: DIV对象的x坐标(以容器左上角为原点)
// y: DIV对象的y坐标(以容器左上角为原点)
// w: DIV对象宽度(不含边框)
// h: DIV对象高度(不含边框)
// bw: DIV对象边框的宽度
// bc: DIV对象边框的颜色
// bg: DIV对象的颜色(不含边框)
buildDragDiv = function(id,x,y,w,h,bw,bc,bg){
var item = document.createElement("div");
item.lineObjs = new Array();
item.id=id;
item.style.left=(isNaN(parseInt(x)) ? 0:x) + "px";
item.style.top=(isNaN(parseInt(y)) ? 0:y) + "px";
item.style.width=(isNaN(parseInt(w)) ? 0:w) + "px";
item.style.height=(isNaN(parseInt(h)) ? 0:h) + "px";
item.style.border=(isNaN(parseInt(bw)) ? 1:bw) + "px solid " + ((typeof(bg)=='undefined' || bg.length==0) ? "#3a3a3a":bc);
item.style.background=(typeof(bg)=='undefined' || bg.length==0) ? "#969696":bg;
item.style.cursor="move";
item.style.zIndex=_ZINDEX;
item.style.position = "absolute";
item.borderWidth=isNaN(parseInt(bw)) ? 1:bw;
item.middleX=parseInt(item.style.left) + parseInt(item.style.width)/2 + item.borderWidth;
item.middleY=parseInt(item.style.top) + parseInt(item.style.Height)/2 + item.borderWidth;
item.setMiddleX=function(){
item.middleX=item.getX() + item.offsetWidth/2;
}
item.getMiddleX=function(){
return item.middleX;
}
item.setMiddleY=function(){
item.middleY=item.getY() + item.offsetHeight/2;
}
item.getMiddleY=function(){
return item.middleY;
}
item.setX=function(x){
item.style.left=x + "px";
};
item.getX=function(){
return parseInt(item.style.left);
};
item.setY=function(y){
item.style.top=y + "px";
};
item.getY=function(){
return parseInt(item.style.top);
};
item.startMouseX=0;
item.startMouseY=0;
item.setStartMouseX=function(evClientX){
item.startMouseX=evClientX-container.X;
}
item.getStartMouseX=function(){
return item.startMouseX;
}
item.setStartMouseY=function(evClientY){
item.startMouseY=evClientY-container.Y;
}
item.getStartMouseY=function(){
return item.startMouseY;
}
item.lastX=0;
item.lastY=0;
item.setLastX=function(){
item.lastX=item.getX();
}
item.getLastX=function(){
return item.lastX;
}
item.setLastY=function(){
item.lastY=item.getY();
}
item.getLastY=function(){
return item.lastY;
}
item.setZIndex=function(z_Index){
item.style.zIndex=z_Index;
}
item.onDragStart=function(x,y,mousex, mousey) {
if(item.style.zIndex != _zindex || item.style.zIndex == _ZINDEX){
_zindex += 2;
item.setZIndex(_zindex);
for(var lineObj in this.lineObjs){
this.lineObjs[lineObj].line.style.zIndex=item.style.zIndex-1;
}
}
}
item.onDrag = function(x,y, mousex, mousey) {
this.setX(coordsX(x,this));
this.setY(coordsY(y,this));
item.setMiddleX();
item.setMiddleY();
for(var lineObj in this.lineObjs){
if(this.lineObjs[lineObj].point == "from"){
this.lineObjs[lineObj].line.from = this.getMiddleX() + "," + this.getMiddleY();
}else if(this.lineObjs[lineObj].point == "to"){
this.lineObjs[lineObj].line.to = this.getMiddleX() + "," + this.getMiddleY();
}
}
}
item.onDragEnd = function(x,y) {
this.isDragging = false;
}
item.bindLine=function(line,point){
var lineObj = new LineObj(line,point);
if(point=="from"){
lineObj.line.from=item.getMiddleX() + "," + item.getMiddleY();
}else if(point=="to") {
lineObj.line.to=item.getMiddleX() + "," + item.getMiddleY();
}
item.lineObjs.push(lineObj);
line.style.zIndex=item.style.zIndex-1;
}
return item;
}
LineObj = function(line,point){
this.line = line;
this.point =point;
}
buildLine = function(id,fromX,fromY,toX,toY,weight,color){
var line=document.createElement("v:line");
line.id=id;
line.style.position="absolute";
line.style.top="0px";
line.style.left="0px";
line.unselectable="on";
line.strokecolor=(typeof(color)=='undefined' || color.length==0) ? "#000000":color;
line.from = (isNaN(parseInt(fromX)) ? 0:fromX) + "," + (isNaN(parseInt(fromY)) ? 0:fromY);
line.to = (isNaN(parseInt(toX)) ? 0:toX) + "," + (isNaN(parseInt(toY)) ? 0:toY);
line.strokeweight=(isNaN(parseInt(weight)) ? 0:weight) + "pt";
line.fill=false;
line.filled=false;
line.getFrom=function(){
return line.from;
}
line.setFrom=function(x,y){
line.from=x + "," + y;
}
line.getTo=function(){
return line.to;
}
line.setTo=function(x,y){
line.to=x + "," + y;
}
return line;
}
window.onload = function() {
App.Start();
}
<js/util.js>
//寻找对象的绝对X坐标
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft;
obj = obj.offsetParent;
}
} else if (obj.x) curleft += obj.x;
return curleft;
}
//寻找对象的绝对Y坐标
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) curtop += obj.y;
return curtop;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- python基于protobu+websocket+tornado实现多种二进制协议消息的接收发送和解析demo
- 基于Web实现在线绘画拓扑图[GraphEditor]
- 基于ASP.NET Web Application的插件实现，附DEMO
- 【转载】基于ASP.NET Web Application的插件实现，附DEMO
- 基于Web实现在线绘画拓扑图[GraphEditor]
- 项目构建之maven篇:8.maven发布web工程及基于spring mvc,jetty实现的用户管理demo
- Android基于WebView的Java和JS相互调用实现步骤，附带精简可行的DEMO
- 基于ASP.NET Web Application的插件实现，附DEMO
- 基于ASP.NET Web Application的插件动态编译反射实现，附DEMO
- 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面
- 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面
- 基于web的全景漫游自动生成加编辑平台的技术实现（三）----krpano主XML文件
- 用ASP和SQL实现基于Web的事件日历
- web挖掘研究和基于多层次数据库的智能化web挖掘引擎系统的实现
- 基于.NET SingalR,LayIM2.0实现的web聊天室
- <三>基于淘宝Fourinone实现统一配置管理指南和demo
- 基于JS的WEB会议室预订拖拽式图形界面的实现
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）
- ArcGIS Server 9.2 实现基于web浏览器的在线编辑
- 用GWT实现基于Ajax的Web开发