做项目累了,整理下之前写得代码,有些地方还有些bug,不过效果还不错。
<html>
<head>
<script src="xxx.js">
setsize();
window.onresize = setsize;
</script>
<body onLoad="init()">
<div id="gis" style="overflow:auto;width:100%;height:100%; z-index:1">
<img src="开发区.jpg" width="100%" height="100%"/>
<div id="menu" style="width:50px; height:60px; position:absolute; top:50px; left:2px; z-index:22; border:solid;">
<table width="100%" height="100%">
<tr><input type="button" value="div1" onClick="opendiv('table')"/></tr>
<tr><input type="button" value="div2" onClick="opendiv('search')"/></tr>
<tr><input type="button" value="归位" onClick="guiwei()"/></tr>
</table>
</div>
<div id="table" style="width:200px; height:200px; position:absolute; top:20px; left:20px; z-index:2; display:block;"
onMouseDown="return drag(this,event);">
<div style="width:200px; height:20px; border:solid;">
<table width="100%" height="100%">
<tr>
<td><input type="button" value="最小" onClick="smalldiv(this,'tablebody')"/></td>
<td><input type="button" id="tableding" value="锚定" onClick="closedrag(this,'table')"/></td>
<td><input type="button" value="关闭" onClick="closediv('table')"/></td>
</tr>
</table>
</div>
<div id="tablebody" style="width:200px; height:180px; z-index:2; border:solid; display:block;">
</div>
</div>
<div id="search" style="width:400px; height:400px; position:absolute; top:100px; left:100px; z-index:2; display:block;"
onMouseDown="return drag(this,event);">
<div style="width:400px; height:20px; border:solid;">
<table width="100%" height="100%">
<tr>
<td><input type="button" value="最小" onClick="smalldiv(this,'searchbody')"/></td>
<td><input type="button" id="searchding" value="锚定" onClick="closedrag(this,'search')"/></td>
<td><input type="button" value="关闭" onClick="closediv('search')"/></td>
</tr>
</table>
</div>
<div id="searchbody" style="width:400px; height:380px; border:solid; display:block;">
</div>
</div>
</div>
</body>
</html>
js文档里的内容:
// JavaScript Document
var key = null;
var tablewidth,tableheight,tabletop,tableleft,searchwidth,searchheight,searchtop,searchleft;
//初始化,保存div初始值
function init()
{
var tablediv = document.getElementById("table");
var searchdiv = document.getElementById("search");
tablewidth = tablediv.style.width;
tableheight = tablediv.style.height;
tabletop = tablediv.style.top;
tableleft = tablediv.style.left;
searchwidth = searchdiv.style.width;
searchheight = searchdiv.style.height;
searchtop = searchdiv.style.top;
searchleft = searchdiv.style.left;
}
//自动适应大小函数
function setsize()
{
var divgis = document.getElementById("gis");
if((document.body)&&(document.body.clientWidth))
divgis.style.width = document.body.clientWidth;
if((document.body)&&(document.body.clientHeight))
divgis.style.height = document.body.clientHeight;
if( document.documentElement && document.documentElement.clientWidth && document.documentElement.clientHeight)
{
divgis.style.height = document.documentElement.clientHeight;
divgis.style.width = document.documentElement.clientWidth;
}
}
//实现可拖动div效果
function $(id)
{
return document.getElementById(id);
};
function drag(element,e)
{
var btnid = element.id + "ding";
if(document.getElementById(btnid).value == "解除")
return false;
e=e||event;
setFocus(element.id);
if(document.addEventListener)
{
document.addEventListener("mousemove",startDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
else
{
document.onmousemove=startDrag;
document.onmouseup=stopDrag;
}
var deltaX=e.clientX-parseInt(element.style.left);
var deltaY=e.clientY-parseInt(element.style.top);
function startDrag(e)
{
e=e||event;
element.style.left=e.clientX-deltaX+"px";
element.style.top=e.clientY-deltaY+"px";
};
function stopDrag()
{
if(document.removeEventListener)
{
document.removeEventListener("mousemove",startDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
else
{
document.onmousemove="";
document.onmouseup="";
}
var oDiv=document.getElementsByTagName("div");
};
return true;
};
function setFocus(elementId)
{
var oDiv=document.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++)
{
if(oDiv[i].id==elementId)
{
oDiv[i].style.zIndex=20;
}
else
{
oDiv[i].style.zIndex=10;
}
}
};
//对其他div的操作
function opendiv(id)
{
document.getElementById(id).style.display = 'block';
}
function closediv(id)
{
var a = document.getElementById(id);
document.getElementById(id).style.display = 'none';
if(id == 'table')
{
a.style.width = tablewidth;
a.style.height = tableheight;
a.style.top = tabletop;
a.style.left = tableleft;
}
if(id == 'search')
{
a.style.width = searchwidth;
a.style.height = searchheight;
a.style.top = searchtop;
a.style.left = searchleft;
}
}
function smalldiv(e,id)
{
var a = document.getElementById(id);
if(a.style.display == 'none')
{
a.style.display = 'block';
e.value = "最小";
}
else
{
a.style.display = 'none';
e.value = "最大";
}
}
//锚定函数,阻止拖动
function closedrag(e,id)
{
if(e.value == "锚定")
{
e.value = "解除";
}
else
{
e.value = "锚定";
}
}
function guiwei()
{
var a = document.getElementById("table");
a.style.width = tablewidth;
a.style.height = tableheight;
a.style.top = tabletop;
a.style.left = tableleft;
a = document.getElementById("search");
a.style.width = searchwidth;
a.style.height = searchheight;
a.style.top = searchtop;
a.style.left = searchleft;
}