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

转载 2006年06月13日 14:31:00

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

相关文章推荐

Android情侣短信软件(1)--Frame动画在悬浮窗口上的实现

最近做了一款情侣短信小软件,感兴趣的朋友可以下载安装玩玩,链接地址 LoveSms.apk 那接下来的事就是总结了,把几个重要的知识点总结发到博客上,以供日后参考。有兴趣的朋友也可以看看,迫切希...
  • pzhtpf
  • pzhtpf
  • 2011-11-21 23:38
  • 4266

PYQT5 实现 无frame窗口的拖动和放缩

-- coding:utf-8 --”’ Created on 2016年12月14日@author: DXLCopyright (C) 2004-2019 Shandong Zhaoyuan So...
  • hidxl
  • hidxl
  • 2016-12-14 09:05
  • 704

Android frame animation 实现 halo 效果

先说一下最终呈现的效果,就像是背景人物后面有一个光圈在闪烁。原理是利用的android帧动画播放技术。源码下载 关键步骤: 1,动画文件,放在drawable目录下 <!-- ...

Android动画Animation之Frame实现类似电影的动画效果

Frame 动画,即顺序播放事先做好的图像,跟电影类似。 接下来的案例是点击按钮实现播放动画,点击停止实现停止动画播放! 1、效果图:        2、main.xml文件很简单: <...

frame buffer编程--重新架构代码,实现动态效果

(一):写在前面这一次没有进行功能上的改进,主要是为了后来修改方便,而将画点,画线,画长方形,画圆等的提取出来,对Makefile进行了修改,方便于后期的维护.同时,为了后面实现我的思路,我进行了一个...

润乾报表使用Frame实现初始参数 报表为空效果

润乾V4 润乾报表 首次不展现结果报表 frame 初始参数

js扩展滚动窗口小插件实现文字左右上下滚动效果实例

方法一:使用小插件实现,兼容很好 插件代码如下:(function($) { $.fn.jMarquee = function(o) { o = $.extend({ speed...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)