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

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

zlfh

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

阅读量1.4k

点赞数

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

HTML 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的拖拽效果，通过鼠标拖动页面上的分割线来调整两个区域（头部和底部）的高度。该功能适用于网页应用中需要灵活调整布局场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码如下：
==========
<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>