类似QQ对话框的上下可拖动代码_网页布局

类似QQ对话框的上下可拖动代码: 发布时间：2020-11-14编辑：脚本学堂

类似QQ对话框上下部分可拖动的代码，兼容IE或火狐以及Chrome等浏览器。上下拖动红条改变显示区域高度，往上则全部显示下部的内容，往下拖则全部显示上部的内容。

<!DOCTYPE html>
    <html>
    <head>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <title>类似QQ<a href=http://www.jb200.com/zt/duihuakuang/ target=_blank class=infotextkey>对话框</a>上下部分可拖动代码</title>
    <style>
    ul,li{margin:0;padding:0;}
    body{font:14px/1.5 Arial;color:#666;}
    #box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;}
    #box ul{list-style-position:inside;margin:10px;}
    #box div{position:absolute;width:100%;}
    #top,#bottom{color:#FFF;height:100%;overflow:hidden;}
    #top{background:green;}
    #bottom{background:skyblue;top:50%}
    #line{top:50%;height:4px;overflow:hidden;margin-top:-2px;background:red;cursor:n-resize;}
    </style>
    <script>
function $(id) {
	return document.getElementById(id)	
}
window.onload = function() {
	var oBox = $("box"), oBottom = $("bottom"), oLine = $("line");
	oLine.onmou<a href=http://www.jb200.com/article/1141.html target=_blank class=infotextkey>sed</a>own = function(e) {
		var disY = (e || event).clientY;
		oLine.top = oLine.offsetTop;
		document.onmousemove = function(e) {
			var iT = oLine.top + ((e || event).clientY - disY);
			var maxT = oBox.clientHeight - oLine.offsetHeight;
			oLine.style.margin = 0;
			iT < 0 && (iT = 0);
			iT > maxT && (iT = maxT);
			oLine.style.top = oBottom.style.top = iT + "px";
			return false
		};	
		document.onmouseup = function() {
			document.onmousemove = null;
			document.onmouseup = null;	
			oLine.releaseCapture && oLine.releaseCapture()
		};
		oLine.setCapture && oLine.setCapture();
		return false
	};
};
</script>
    </head>
    <body>
    <center>上下拖动红条改变显示区域高度</center>
    <div id="box">
    <div id="top">
    <ul>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/40.html" _fcksavedurl="/article/201207/40.html" title="自动悬浮于顶部的网页导航菜单">自动悬浮于顶部的网页导航菜单</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/39.html" _fcksavedurl="/article/201207/39.html" title="两例Div平行不覆盖">两例Div平行不覆盖</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/38.html" _fcksavedurl="/article/201207/38.html" title="让图片DIV竖向滑动的<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>特效代码">让图片DIV竖向滑动的JavaScript特效代码</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/37.html" _fcksavedurl="/article/201207/37.html" title="仿<a href=http://www.sina.com.cn target=_blank class=infotextkey>新浪</a>微博浮动的消息提示框-智能定位">仿新浪微博浮动的消息提示框-智能定位</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/36.html" _fcksavedurl="/article/201207/36.html" title="基于<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>实现的拖动浮动层">基于jquery实现的拖动浮动层</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/35.html" _fcksavedurl="/article/201207/35.html" title="仿新浪微博效果的智能的消息浮动层">仿新浪微博效果的智能的消息浮动层</a></li>
    </ul>
    </div>
    <div id="bottom">
    <ul>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/40.html" _fcksavedurl="/article/201207/40.html" title="自动悬浮于顶部的网页导航菜单">自动悬浮于顶部的网页导航菜单</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/39.html" _fcksavedurl="/article/201207/39.html" title="两例Div平行不覆盖">两例Div平行不覆盖</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/38.html" _fcksavedurl="/article/201207/38.html" title="让图片DIV竖向滑动的JavaScript特效代码">让图片DIV竖向滑动的JavaScript特效代码</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/37.html" _fcksavedurl="/article/201207/37.html" title="仿新浪微博浮动的消息提示框-智能定位">仿新浪微博浮动的消息提示框-智能定位</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/36.html" _fcksavedurl="/article/201207/36.html" title="基于jquery实现的拖动浮动层">基于jquery实现的拖动浮动层</a></li>
    <li><span class="rt">07-13</span>·<a target="_blank" href="/article/201207/35.html" _fcksavedurl="/article/201207/35.html" title="仿新浪微博效果的智能的消息浮动层">仿新浪微博效果的智能的消息浮动层</a></li>
    </ul>
    </div>
    <div id="line"></div>
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：自动悬浮于顶部的网页导航菜单
下一篇：javascript与css结合实现的左右可拖动的内容显示区

与类似QQ对话框的上下可拖动代码有关的文章

本文标题：类似QQ对话框的上下可拖动代码
本页链接：http://www.jb200.com/tx/41.html

浏览排行

栏目分类

热点文章

类似QQ对话框的上下可拖动代码