利用层模拟windows窗口，可以托动！高手进！稻草人...阿信...100分！

没时间写了，先实现一些功能：<script>
var flag = 0;
var max=false;
function eMousedown(obj) {
  flag = 1;
  obj.setCapture();
  cx = event.x - obj.offsetLeft;
  cy = event.y - obj.offsetTop;
}
function eMouseup(obj){
  flag = 0 ;
  obj.releaseCapture();
}
function eMousemove(obj){
  if(flag==1){
    obj.style.left = event.x -cx;
    obj.style.top = event.y -cy;
  }
}
function maxact(obj){
  if(max){
    //alert(document.body.clientHeight)
obj.style.top = 0
obj.style.left = 0
    obj.style.width = document.body.clientWidth;
obj.style.height = document.body.clientHeight;
  }
  else{
    obj.style.top = 151;
    obj.style.left = 218;
    obj.style.width = 315;
obj.style.height = 165;
  }
}
</script>
<div id="Layer1" style="position:absolute; left:218px; top:151px; width:315px; height:165px; z-index:1;background-color:#666666"  onmousemove="eMousemove(Layer1)"  onmouseup="eMouseup(Layer1)" ondblclick="max=!max;maxact(this);"> 
  <table width="100%" height="100%" border="1">
    <tr height="30"> 
      <td colspan="2" style="cursor:hand"  onmousedown="eMousedown(Layer1)"> 
            双击可以放大，缩小！可以拖动
      </td>
    </tr>
    <tr align="left"> 
      <td colspan="2" height="155">这里是内容...</td>
    </tr>
  </table>
</div>

解决方案 »

  1.   

    <html>
    <head>
    <title>模拟Windows窗口</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    <!--
    /**
     * This js is use the technic layer to realize the effect of windows.
     * Author :chouchy ([email protected])
     * Date   : 2003-12-09
     */var x = 0;  //Initialize the varibles
    var y = 0;
    var drag  = 0;
    var move = 0;with(window.document){  //Custom event
    onmousemove = mouseMove;
    onmousedown = mouseDown;
    onmouseup     = mouseUp;
    //ondragstart    = mouseStop;
    }function mouseUp() { //mouseUp
    move = 0 ;
    }function mouseDown() { //mouseDown
    if (drag) {
    clickleft = window.event.x - parseInt(dragObj.style.left);
    clicktop = window.event.y - parseInt(dragObj.style.top);
    move = 1;
    }
    }function mouseMove() { //mouseMove
    if (move) {
    dragObj.style.left = window.event.x - clickleft;
    dragObj.style.top = window.event.y - clicktop;
    }
    }
    function mouseStop() { //mouseStop
    window.event.returnValue = false;
    }
    function Initdiv() { //Initialize the div's position:center
    mydiv.style.left = (screen.width-400)/2;
    mydiv.style.top = (screen.height-400)/2;
    //alert(mydiv.style.left +","+mydiv.style.top);
    }var flag = 1; //Initialize varible:flag

    function opClose() { //Control the div show or not
    if(flag==1){
    content.style.display="none";
    flag=0;
    }
    else
    {
    content.style.display="block";
    flag=1;
    }
    }
    //-->
    </SCRIPT>
    <style type="text/css">
    <!--
    td {  font: 9pt "Verdana", "宋体"; color: #333333}
    -->
    </style>
    </head><body bgcolor="#FFFFFF" text="#000000" onload="Initdiv()" style="overflow:hidden"> <div id="mydiv"  style="position:absolute;width:400;height=200;display:block" > 
      <table width="400" border="0" cellspacing="1" cellpadding="1" bgcolor="#999999">
        <tr> 
          <td bgcolor="#0099FF"> 
            <div id="titleBar" onmouseout=drag=0  onmouseover="dragObj=mydiv; drag=1;move=0">
            <table width="400" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td width="260"  ondbclick="opClose()"> 窗口示例</td>
                <td width="90" align="center" onclick="opClose()" style="cursor:hand">展开/收缩</td>
                <td width="50" align="center" onclick="mydiv.style.display='none'" style="cursor:hand">关闭</td>
              </tr>
            </table>
    </div>
          </td>
        </tr>
      </table>
      <div id="content" style="position:absolute;display:block">
     <table width="404" border="0" cellspacing="1" cellpadding="1" bgcolor="#999999">
    <tr>   
            <td bgcolor="#EEEEEE" height="100" align="center">内容...</td>
      </tr>
    </table>
     </div>
    </div>
    </body>
    </html>
      

  2.   

    去掉 //ondragstart    = mouseStop;前的//
      

  3.   

    <td width="260"  ondbclick="opClose()"> 窗口示例</td>
    丢了一个l！
    应该是：ondblclick="opClose()">不错。一定给你给分。
      

  4.   

    偶似乎做过一个这样的东西，用了几个htc，不过偶必须去找找，看看能否找到
      

  5.   

    <html>
    <head>
    <style>
    <!--
    .drag{position:relative;cursor:hand}
    -->
    </style>
    <script language="JavaScript1.2">
    <!--var dragapproved=false
    var z,x,y
    function move(){
    if (event.button==1&&dragapproved){
    z.style.pixelLeft=temp1+event.clientX-x
    z.style.pixelTop=temp2+event.clientY-y
    return false
    }
    }
    function drags(){
    if (!document.all)
    return
    if (event.srcElement.className=="drag"){
    dragapproved=true
    z=event.srcElement
    temp1=z.style.pixelLeft
    temp2=z.style.pixelTop
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
    }
    }
    document.onmousedown=drags
    document.onmouseup=new Function("dragapproved=false")
    //-->
    </script>
    <!--drag engine code installed here-->
    </head>
    <body>
    <img src="test1.gif" class="drag"><br>
    <img src="test2.gif" class="drag"><br>
    <h1><b></b></h1>
    </body>
    </html>