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

最新推荐文章于 2021-07-05 22:52:31 发布

zlfh

最新推荐文章于 2021-07-05 22:52:31 发布

阅读量1.3k

点赞数

分类专栏： HTML 文章标签： function border javascript div table 浏览器

HTML 专栏收录该内容

13 篇文章 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">

</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> </td>
</tr>
</table>
</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>

zlfh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
不用FRAME实现的窗口分割及拖曳效果

源代码如下：==========var bInDrag = false;// 分割条高度var iSplitHeight = 20;// 浏览器高度var iBrowserHeight = 400;/*** 初始化拖曳** @access public* @param object [obj]* @return void*/function initDrag(obj) { bInDra
复制链接

扫一扫

专栏目录