欢迎访问:常州市武进区嘉泽中心小学网站 !今天是:
栏目列表
您现在的位置是:首页>>教师>>计算机技术>>网站制作技术>>文章内容
可移动、改变大小的窗口(层)
发布时间:2008-11-20   点击:   来源:本站原创   录入者:佚名
 

<div id='shadow' style='visibility:hidden; position:absolute; top:30; left:30; width:30; height:30; z-index:1; background-color:#BED9EB; filter:alpha(opacity=40);'>我是阴影,半透明的</div>

<table cellpadding='4' cellspacing='0' style='position:absolute; top:160; left:160; width:160; height:160; z-index:1020; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; border:1 solid #BED9EB; background-color:#ffffff; FONT-SIZE:12; FONT-FAMILY:宋体;' onmousedown=Focus(this)>
 <tr style='display:none'><td></td><td style='width:45;'></td><td style='width:10;'></td></tr> <!-- 固定单元格宽度 -->
 <tr style='cursor:default; background-color:#BED9EB;' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
  <td style='filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><strong>title</strong></div>
  </td>
  <td colspan='2' align='right' style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><a href=''>[删]</a><a href=''>[改]</a></div>
  </td>
 </tr>
 <tr>
  <td colspan='3' valign='top' style='height:100%; padding-top:10; padding-left:10; padding-right:10; padding-bottom:0'>
感谢CSDN的朋友们,谢谢你们的热心帮助!
<p>
熬了两个通宵,还没做完呢,请大家批评!呵呵!
  </td>
 </tr>
 <tr>
  <td colspan='2'></td><td style='cursor:se-resize; height:10; background-color:#BED9EB; FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#BED9EB, endColorStr=#FFFFFF, gradientType=1);' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)></td> <!-- state & resize -->
 </tr>
</table>

<table cellpadding='4' cellspacing='0' style='position:absolute; top:100; left:300; width:200; height:100; z-index:1010; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; border:1 solid #BED9EB; background-color:#ffffff; FONT-SIZE:12; FONT-FAMILY:宋体;' onmousedown=Focus(this)>
 <tr style='display:none'><td></td><td style='width:45;'></td><td style='width:10;'></td></tr> <!-- 固定单元格宽度 -->
 <tr style='cursor:default; background-color:#BED9EB;' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
  <td style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><strong>可移动、改变大小的窗口(我看了许多精华贴,还是不会)</strong></div>
  </td>
  <td colspan='2' align='right' style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><a href=''>[删]</a><a href=''>[改]</a></div>
  </td>
 </tr>
 <tr>
  <td colspan='3' valign='top' style='height:100%; padding-top:10; padding-left:10; padding-right:10; padding-bottom:0'>
我想将remove,content,resize这三个部分整合成窗口
<p>
试过用div嵌套,但不会调用父元素。我用MouseDown(this.parentElement)不可以,obj.srcElement.parentElement也不行,搞不懂
<p>
做成table或分开显示也都做不出来,请高手帮忙,谢谢!
<p>
<a href='http://{域名已经过期}/html/MoveTableWithMouse.htm'>http://{域名已经过期}/html/MoveTableWithMouse.htm</a><br>
这个代码看了,但我不想给元素命名,因为将来要画出许多个窗口,动态创建元素,还要做z-index,最后保存到数据库,感觉名字固定了很麻烦。
<p>
如果有国外的链接请帖一下,谢谢!
  </td>
 </tr>
 <tr>
  <td colspan='2'></td><td style='cursor:se-resize; height:10; background-color:#BED9EB; FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#BED9EB, endColorStr=#FFFFFF, gradientType=1);' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)></td> <!-- state & resize -->
 </tr>
</table>

<script>
 /**
 * 作者: aiiiq
 * 邮件: aiiiq@{域名已经过期}
 * 网址: http://{域名已经过期}
 * 日期: 2005-9-6 09:20:00
 * 环境: IE6.0.2800.2106 & WIN98 & 网吧 & 北京
 * 致谢: 特别感谢CSDN的朋友们,谢谢你们的热心帮助!
 */

 /**
 * 初始化
 */
 move = null; //移动标记
 wmin = 100; //最小的窗口为100x100
 zmax = 10000; //刻录当前的最高层
 ssize = 4; //阴影宽度

 /**
 * 父窗口内按下鼠标时,得到相关的值
 */
 function Down(obj){
  move = 1;
  obj.x = event.x; //鼠标起始位置
  obj.y = event.y;
  obj.l = obj.offsetParent.offsetLeft; //父元素当前位置
  obj.t = obj.offsetParent.offsetTop;
  obj.w = obj.offsetParent.offsetWidth;
  obj.h = obj.offsetParent.offsetHeight;
  Shadow(obj) //重画阴影
  obj.setCapture(); //得到鼠标
 }

 /**
 * 标题栏托动窗口
 */
 function Remove(obj){
  if(move != null){
   obj.offsetParent.style.left = event.x - obj.x + obj.l; // 鼠标移过的位置 + 父元素当前位置
   obj.offsetParent.style.top = event.y - obj.y + obj.t;
   Shadow(obj) //重画阴影
   }
 }

 /**
 * 状态栏改变窗口大小
 */
 function Resize(obj){
  if(move != null){
   obj.offsetParent.style.width = Math.max(wmin, event.x - obj.x + obj.w); //窗口的width, height不能为负数
   obj.offsetParent.style.height = Math.max(wmin, event.y - obj.y + obj.h);
   Shadow(obj) //重画阴影
  }
 }

 /**
 * 放开鼠标时,清理不用的东西
 */
 function Up(obj){
  move = null;
  document.getElementById('shadow').style.visibility = 'hidden'; //隐藏阴影
  obj.releaseCapture(); //释放鼠标
 }

 /**
 * 父窗口按下鼠标时,将当前层置顶
 */
 function Focus(obj){
  zmax = zmax +10; //最高层(变量)每次点击加10,以保证最高
  obj.style.zIndex = zmax; //将当前层置顶,当前层 = 最高层
  document.getElementById('shadow').style.zIndex = zmax - 1; //阴影的层 = 最高层 - 1
 }

 /**
 * 标题栏按下鼠标或移动窗口时,重画阴影
 */
 function Shadow(obj){
  /**
  * 阴影的位置 = 新的父元素位置 + 阴影宽度
  */
  document.getElementById('shadow').style.left = obj.offsetParent.offsetLeft + ssize;
  document.getElementById('shadow').style.top = obj.offsetParent.offsetTop + ssize;
  document.getElementById('shadow').style.width = obj.offsetParent.offsetWidth;
  document.getElementById('shadow').style.height = obj.offsetParent.offsetHeight;
  document.getElementById('shadow').style.visibility = 'visible';
 }

</script>


附件:
    关闭窗口
    打印文档
    账号登录
    保持登录 忘记密码?
    账号与武进教师培训平台同步