一款JS特效：类似QQ对话框上下部分可拖动的代码，全兼容的，在IE或火狐以及Chrome等浏览器都能正常运行。操作方法：上下拖动红条改变显示区域高度，往上则全部显示下部的内容，往下拖则全部显示上部的内容，推荐给大家。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS上下两部分可拖动改变div层高度的代码丨芯晴网页特效丨CsrCode.Cn</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.onmousedown = 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><a href="/html/txdm/cddh/" title="">菜单导航特效</a></li>
<li><a href="/html/txdm/tcys/" title="">图层样式特效</a></li>
<li><a href="/html/txdm/ljwb/" title="">链接文本特效</a></li>
<li><a href="/html/txdm/txtx/" title="">图形图像特效</a></li>
<li><a href="/html/txdm/sbtx/" title="">鼠标特效代码</a></li>
<li><a href="/html/txdm/ymck/" title="">页面窗口特效</a></li>
<li><a href="/html/txdm/wybj/" title="">网页背景特效</a></li>
<li><a href="/html/txdm/rqsj/" title="">日期时间特效</a></li>
<li><a href="/html/txdm/ymss/" title="">页面搜索特效</a></li>
<li><a href="/html/txdm/bgtx/" title="">表格表单特效</a></li>
<li><a href="/html/txdm/qtdm/" title="">其他网页特效</a></li>
</ul>
</div>
<div id="bottom">
<ul>
生活常识
<li><a href="http://changshi.csrcode.cn/html_cs/shenghuochangshi/">生活常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/jiankangzhishi/">健康知识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/">美容瘦身</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/jianfeishoushen/">减肥瘦身</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/meirongshoushen/meironghufu/">美容护肤</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/yinshichangshi/">饮食常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/yangshengzhidao/">养生之道</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/diannaozhishi/">电脑知识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/touzilicai/">投资理财</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/fushichangshi/">服饰常识</a></li>
<li><a href="http://changshi.csrcode.cn/html_cs/shejiaoliyi/">社交礼仪</a></li>
</ul>
</div>
<div id="line"></div>
</div>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
分享到：
相关推荐
独立打包，保证可解压，内含大量源码，网上搜集而来。一共10几包，每个包几十兆。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序...
标题中的“访QQ弹出的消息框(可以移动)”指的是在编程中创建一个类似QQ消息提示框的窗口，并且这个窗口可以被用户自由移动。在计算机编程中，特别是UI设计时，这种可移动的消息框是非常常见的功能，它可以提供给用户...
独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
独立打包，保证可解压，内含大量源码，网上搜集而来。一共10几包，每个包几十兆。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序...
如题，此实例非常适合学习，重载并自绘了Wnd类，效果是上下文字、图片、文字由大到小和星星闪烁等滚动效果。实例使用了加载类似xml文件读取信息，然后显示。 COM_ATL_Tutorial 简单的atl控件演示 COM接口挂钩及其...
独立打包，保证可解压，内含大量源码，网上搜集而来。 Visual.C++编程技巧精选500例源代码 内含各种例子（vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、...
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 ...
11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 ...