关闭

不用FRAME实现的窗口分割及拖曳效果

1023人阅读 评论(0) 收藏 举报

源代码如下:
==========
<html>
<head>
<script language="javascript">
<!--
var bInDrag = false;
// 分割条高度
var iSplitHeight = 20;
// 浏览器高度
var iBrowserHeight = 400;

/**
* 初始化拖曳
*
* @access  public
* @param  object  [obj]
* @return  void
*/
function initDrag(obj) {
 bInDrag = true;
 obj.setCapture();
}

/**
* 释放拖曳
*
* @access  public
* @param  object  [obj]
* @return  void
*/
function freeDrag(obj) {
 bInDrag = false;
 obj.releaseCapture();
}

/**
* 开始拖曳
*
* @access  public
* @return  void
*/
function doDrag() {
 var iMoveHeight = 0;
 if (bInDrag) {
  // 拖拉的高度
  iMoveHeight = event.clientY - document.getElementById('splitLine').style.pixelTop;
  document.getElementById('head').style.pixelHeight += iMoveHeight;
  document.getElementById('splitLine').style.pixelTop = document.getElementById('head').style.pixelHeight + (iSplitHeight/2);
  document.getElementById('foot').style.pixelTop += iMoveHeight;
  document.getElementById('foot').style.pixelHeight = iBrowserHeight - document.getElementById('foot').style.pixelTop;
 }
}
-->
</script>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
}
-->
</style>
</head>
<body>
<div id="head" style="overflow:auto; height:100">
<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
<tr valign="top">
 <td>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
 </td>
 <td>&nbsp;</td>
</tr>
</table>
</div>

<div id="splitLine" height="20">
<hr onmousedown="initDrag(this);" onmouseup="freeDrag(this);" onmousemove="doDrag();" style="cursor:row-resize" color="#c6d7ff" noShade size="5">
</div>

<div id="foot" style="overflow:auto; height:300">
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr valign="top">
 <td>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
  fgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg<br>
 </td>
    <td>gggggggggggggggggg</td>
</tr>
</table>
</div>
</body>
</html>

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:45079次
    • 积分:670
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:15篇
    • 译文:0篇
    • 评论:0条