div 恢复最小化问题

但是添加去的div 如何定位呢？如果在style 定死left top. 当我添加了2个div的时候不是就重合了吗？
图表的显示和隐藏是什么意思？建议你定义两个样式,一个是最小时的一个是常态的，这样你只用更换样式即可.
还是有一些问题的。最小化的时候我需要知道页面的大小，以及宽度。在几个div最小化时候，我还要考虑排布的问题。

//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height  = parseInt(msg.style.height) + parseInt(tit.style.height) +  2*2;
sha.style.height  = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height  = parseInt(tit.style.height) + 2*2;
sha.style.height  = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//关闭;
function cls(obj)
{ var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
win.style.visibility = "hidden";
sha.style.visibility = "hidden";
}

<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 网页特效 ¦Linkweb.cn/Js ¦---页面内的超级酷浮动窗口 </title>
<style type='text/css'>

</style>
<script language=JScript>

</script> <script language='JScript'>

</script>
</head>
<body onselectstart='return false' scroll='no' onload="initialize()"> </body>
</html> 看看这个例子

建议你先动手做一做再来提问，到时候你自己会把一些简单的问题解决了。那时提问就比较有针对性了。
贴点代码对你应该有帮助。
<title>网页窗口-mdi测试</title>
<script>
var width=230
var height=200
</script>
<style>
div{position:absolute;cursor:default;}
.movediv{padding-left:10px;padding-top:3px;z-index:0;      display:block;top:50;width:230;height:25;background-color:#ffffff;cursor:hand;background-image:url(..\img\bt.gif);}
.movedivup{padding-left:10px;padding-top:3px;z-index:10;      display:block;top:50;width:230;height:25;background-color:#ffffff;cursor:hand;background-image:url(..\img\bt.gif);}
.textdiv{
      display:block;top:23;left:0;width:230;height:200;background-color:#eeeeff;}
.rootdiv{
      display:block;top:223;left:0;width:230;height:5;cursor:default;background-color:blue;}
.mindiv{
      display:block;top:6;left:188;width:12;height:12px;cursor:default;}
.closediv{
      display:block;top:6px;left:206;width:12;height:12px;cursor:default;}
</style>
<div id=movediv1 class=movediv onclick='this.classname="movedivup"' style="z-index:10">我的个人信息
  <div id=div2 class=textdiv>
   <div style="z-index:1;padding-left:5px"></div>
   <div style="z-index:-1;top:0">
    <img src=..\img\text.gif width=230 height=200>
   </div>
  </div>
  <div id=movediv2 class=rootdiv><img src=..\img\root.gif></div>
  <div id=div4 class=mindiv onclick="movediv1.style.display='none';div1.style.display=''"><div></div></div>
  <div id=div11 class=closediv onclick="movediv1.style.display='none'"><div></div></div>
</div>
<div id=div5 style="z-index:0"></div>
<div id=div6 style="z-index:0"></div>
<div id=div7 style="z-index:0"></div>
<div id=div1 class=movediv style="width:180;top:0;left:0;display:none" onclick="movediv1.style.display='';div1.style.display='none'">我的个人信息</div>
<script>
var i=1;
var obj=null;
var dx,dy,objt,objl,whoclick=null;
function mousedown()
{ if(whoclick!=null)whoclick.classname="movediv";
  obj=event.srcElement;
  if(obj.id.indexOf("movediv") ==-1) {obj=null;return;}
  obj.classname="movedivup";
  dx=window.event.x;
  dy=window.event.y;
  objt=obj.offsetTop;
  objl=obj.offsetLeft;
}function mouseup(){if(obj!=null) whoclick=obj;obj=null;}
function mousemove()
{if(obj!=null)
  {
   //obj.style.z-index=10;
   obj.style.xp=window.event.x-dx;
   obj.style.yp=window.event.y-dy;
   obj.style.left=objl+obj.style.xp;
   obj.style.top=objt+obj.style.yp;
  }
}
document.onmousedown=mousedown
document.onmousemove=mousemove
document.onmouseup=mouseup
</script>

<title>网页窗口-mdi测试</title>
<script>
var width=230
var height=200
</script>
<style>
div{position:absolute;cursor:default;}
.movediv{padding-left:10px;padding-top:3px;z-index:0;      display:block;top:50;width:230;height:25;background-color:#ffffff;cursor:hand;background-image:url(..\img\bt.gif);}
.movedivup{padding-left:10px;padding-top:3px;z-index:10;      display:block;top:50;width:230;height:25;background-color:#ffffff;cursor:hand;background-image:url(..\img\bt.gif);}
.textdiv{
      display:block;top:23;left:0;width:230;height:200;background-color:#eeeeff;}
.rootdiv{
      display:block;top:223;left:0;width:230;height:5;cursor:default;background-color:blue;}
.mindiv{
      display:block;top:6;left:188;width:12;height:12px;cursor:default;}
.closediv{
      display:block;top:6px;left:206;width:12;height:12px;cursor:default;}
</style>
<div id=movediv1 class=movediv onclick='this.classname="movedivup"' style="z-index:10">我的个人信息
  <div id=div2 class=textdiv>
   <div style="z-index:1;padding-left:5px"></div>
   <div style="z-index:-1;top:0">
    <img src=..\img\text.gif width=230 height=200>
   </div>
  </div>
  <div id=movediv2 class=rootdiv><img src=..\img\root.gif></div>
  <div id=div4 class=mindiv onclick="movediv1.style.display='none';div1.style.display=''">min<div></div></div>
  <div id=div11 class=closediv onclick="movediv1.style.display='none'">hide<div></div></div>
</div>
<div id=div5 style="z-index:0"></div>
<div id=div6 style="z-index:0"></div>
<div id=div7 style="z-index:0"></div>
<div id=div1 class=movediv style="width:180;top:0;left:0;display:none" onclick="movediv1.style.display='';div1.style.display='none'">我的个人信息</div>
<script>
var i=1;
var obj=null;
var dx,dy,objt,objl,whoclick=null;
function mousedown()
{ if(whoclick!=null)whoclick.classname="movediv";
  obj=event.srcElement;
  if(obj.id.indexOf("movediv") ==-1) {obj=null;return;}
  obj.classname="movedivup";
  dx=window.event.x;
  dy=window.event.y;
  objt=obj.offsetTop;
  objl=obj.offsetLeft;
}function mouseup(){if(obj!=null) whoclick=obj;obj=null;}
function mousemove()
{if(obj!=null)
  {
   //obj.style.z-index=10;
   obj.style.xp=window.event.x-dx;
   obj.style.yp=window.event.y-dy;
   obj.style.left=objl+obj.style.xp;
   obj.style.top=objt+obj.style.yp;
  }
}
document.onmousedown=mousedown
document.onmousemove=mousemove
document.onmouseup=mouseup
</script>

谢谢！但是有些问题无法执行您的代码。var b = new xWin("2",240,200,100,100,"班员信息","Welcome to visited my personal website: <br> <a href=http://www14.brinkster.com/wildcity target=_blank> http://wildcity.126.com </a> <br> and u can also sign my guestbook at: <br> <a href=http://www14.brinkster.com/wildcity/gbook target=_blank> http://wildcity.126.com/gbook </a> <br> <br> thx!!! =)...");
这里有点问题。我调试成
var b = new xWin("2",240,200,100,100,"班员信息","Welcome to visited my personal");也不可以我是个js的新手。但不是一个dev的新手。虽然做过几年asp. 但那个时候js 多是做做校验，跑马灯的东西，没有现在这么复杂。我感觉你们的代码都是面向过程的做法来完成的。我看了一些外国的例子。它们好像都是利用oop来做的。我的想法是应该有一个class 对象来代表这个div. 我们对div做得动作由这个类自己来完成。这样的话逻辑复杂度会比较好的被分裂开。
如果这样的话，应该如何完成呢？新手无心请勿见怪。

晕，你复制回去的时候要去掉空格
CSDN会把代码自动产生空格的

应该有一个class 对象来代表这个div. 我们对div做得动作由这个类自己来完成
无语
本来就是必须触发JS事件来完成，本来就是由JS自己完成的！

还是有些问题要仔细请教的。按照6 楼的例子。我又改了一下。发现了下面的一些问题。
var obj=null;
var dx,dy,objt,objl,whoclick=null; function mousedown()
{
//  用obj 记录刚才在那个div 上面进行了down操作。
  obj=event.srcElement;
  dx=window.event.x;
  dy=window.event.y;
  objt=obj.offsetTop;
  objl=obj.offsetLeft;
} function mouseup(){
//if(obj!=null) whoclick=obj;
//obj=null;
if(obj!=null) {
obj.style.left = window.event.x;
obj.style.top = window.event.y;
}
obj=null;  //obj 对象清空
}
function mousemove()
{
if(obj!=null) // 如果有移动，将这个div 也移动起来
  {
obj.style.left = window.event.x;
obj.style.top = window.event.y;
  }
}
document.onmousedown=mousedown
document.onmousemove=mousemove
document.onmouseup=mouseup
首先
document.onmousedown=mousedown
document.onmousemove=mousemove
document.onmouseup=mouseup 我本来想写在<div class='window'  onmousedown="javascript:mousedown()" ....>
但是一运行告诉我内存不足。疑问。
同时我发现当我移动一个单一div 的时候没有问题，可以运行，就是鼠标会猛烈的变为沙漏。
但是当我点击一个有多个子div 的时候
比如
<div>
   <div>
     <div>
....我在vs 调试发现，onmousedown 捕捉到event 发生在第二个div 事件上面了。之后我移动鼠标，div就没有
反应了。同时伴随着鼠标猛烈的运行状态。我想那应该是onmouseove被运行了。星星能能解答一下吗？在六楼的例子里面，能不能改由class 的方式实现，比如一种div 的，我希望点击以后 div背景色也变化，然后移动。而div2 背景不变化，只进行移动。多谢那么多星星的指点。

为什么不用开源的东西,非要自己写呢?一个人的智慧能同多人智慧比吗?http://www.aspstat.com/jbox/demo.htm

我的那个最小化和还原那个FF下是兼容的
就是ocument.body.insertAdjacentHTML("beforeEnd",str);
这个不兼容

你加这么一个不是动态的DIV进去就知道最小化是兼容的了，就是document.body.insertAdjacentHTML("beforeEnd",str); 不兼容FF添加不上而已<div id=xMsg4 style='z-index:10000;width:160px;height:200px;left:200px;top:200px;background-color:#336699;color:#336699;font-size:8pt;font-family:Tahoma;position:absolute;cursor:default;border:2px solid #336699;' onmousedown='getFocus(this)'>
<div style='background-color:#336699;width:156;height:20;color:white;' onmousedown='startDrag(this)' onmouseup='stopDrag(this)' onmousemove='drag(this)' ondblclick='min(this.childNodes[1])'>
<span style='width:132px;padding-left:3px;'>窗口4</span>
<span style='width:12px;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>
<span style='width:12px;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide('4',null)'>r</span>
</div>
<div style='width:100%;height:176px;background-color:white;line-height:14px;word-break:break-all;padding:3px;'>xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13
</div>
</div>
<div id=xMsg4bg style='width:160px;height:200px;top:200px;left:200px;z-index:9999;position:absolute;background-color:black;filter:alpha(opacity=40);'>
</div>

chinmo 非常感谢你的回答。但是你的demo 我一个也不能够跑起来晕死了。能不能直接写成小的html 文件发送给我呢？谢谢你我的email [email protected]

这个改改样式应该可以满足你的要求了.你怎么还要改代码呢?<style>
div{position:absolute;cursor:default;}
.movediv{padding-left:10px;padding-top:3px;z-index:0; display:block;top:50;width:230;height:25;cursor:hand;background:#CCF;}
.movedivup{padding-left:10px;padding-top:3px;z-index:10;display:block;top:50;width:230;height:25;cursor:hand;}
.textdiv{
      display:block;top:23;left:0;width:230;height:200;background-color:#eeeeff;}
.rootdiv{
      display:block;top:223;left:0;width:230;height:5;cursor:default;background-color:blue;}
.mindiv{
      display:block;top:1px;left:188px;width:20px;height:12px;text-align:center;cursor:default;border:2px solid #DDD;background:#EEE}
.closediv{
      display:block;top:1px;left:206px;width:20px;height:12px;text-align:center;cursor:default;border:2px solid #DDD;background:#EEE}
</style>
<div id=movediv1 class=movediv onclick='this.classname="movedivup"' style="z-index:10">我的个人信息
  <div id=div2 class=textdiv>
   <div style="z-index:1;padding-left:5px"></div>
   <div style="z-index:-1;top:0"></div>
  </div>
  <div id=movediv2 class=rootdiv></div>
  <div id=div4 class=mindiv onclick="movediv1.style.display='none';div1.style.display=''" title="最小化">-<div></div></div>
  <div id=div11 class=closediv onclick="movediv1.style.display='none'" title="关闭">x<div></div></div>
</div>
<div id=div1 class=movediv style="width:180;top:0;left:0;display:none" onclick="movediv1.style.display='';div1.style.display='none'">我的个人信息</div>
<script>
var obj=null;
var dx,dy,objt,objl,whoclick=null;
function mousedown()
{ if(whoclick!=null)whoclick.classname="movediv";
  obj=event.srcElement;
  if(obj.id.indexOf("movediv") ==-1) {obj=null;return;}
  obj.classname="movedivup";
  dx=window.event.x;
  dy=window.event.y;
  objt=obj.offsetTop;
  objl=obj.offsetLeft;
}function mouseup(){if(obj!=null) whoclick=obj;obj=null;}
function mousemove()
{if(obj!=null)
  {
   //obj.style.z-index=10;
   obj.style.xp=window.event.x-dx;
   obj.style.yp=window.event.y-dy;
   obj.style.left=objl+obj.style.xp;
   obj.style.top=objt+obj.style.yp;
  }
}
document.onmousedown=mousedown
document.onmousemove=mousemove
document.onmouseup=mouseup

已经发你邮箱了，自己测试吧
由于document.body.insertAdjacentHTML("beforeEnd",str); 不兼容FF添加不上而已
所以我事先加了一个DIV

都非常的感谢。那个demo 我测试过了非常的好用。但是和我原来设计的div 还有些不一样。我要改我的界面才可以。东西很好用，但我感觉还是有些不通用。而且在添加div 的手法，是利用字符串直接加的span. 我感觉这个手法实在有些不繁琐了吧，应该能做得更加简单些。给分。

调试易

div 恢复最小化问题

解决方案 »

div 恢复 最小化问题

解决方案 »

div 恢复最小化问题