一款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>
分享到：
相关推荐
在安卓开发中，创建一个仿QQ对话框的用户界面是一项常见的任务，这涉及到对原生Android UI组件的自定义和优化，以实现类似QQ聊天应用的交互体验。本项目提供的"QQ对话框安卓源码"就是一个很好的学习和参考实例，帮助...
本文将深入探讨如何使用JavaScript实现一个可拖动的、具有QQ对话框风格的模拟对话框，以及涉及的相关知识点。 首先，我们要了解JavaScript的基本语法和DOM操作。JavaScript是网页动态效果的主要驱动语言，它可以...
在本程序中，"类似QQ自动停靠"可能包含以下核心代码实现： 1. 监听窗口移动事件：设置事件处理器，当窗口被拖动时触发。 2. 检测屏幕边界：在事件处理器中，检查窗口的位置是否靠近屏幕的上、左、右边缘。 3. 停靠...
标签“仿QQ对话框 源码”进一步确认了这是关于对话框界面的代码实现，学习这个源码可以帮助开发者了解如何在实际项目中创建类似QQ的聊天界面，提升应用的用户体验。 至于压缩包子文件的文件名称"ListView"，它可能...
"类似QQ消息框的对话框"是一个典型的界面设计元素，它模仿了QQ这款流行即时通讯软件中的消息展示方式。这种对话框通常包含发送者和接收者的头像、昵称、消息内容以及时间戳等关键信息，为用户提供了一个清晰、直观的...
【标题】"模拟QQ对话框的VC聊天室程序代码"是一个基于Visual C++（简称VC）的项目，旨在实现一个类似QQ的对话框界面的聊天室应用。在计算机科学领域，这种类型的项目通常涉及到网络编程，特别是使用Winsock库进行套...
在提供的压缩包文件中，“查找QQ对话框句柄”可能是实现这一目标的关键代码，它可能包含了一系列的API调用来定位QQ的对话框。 接下来，一旦获取到QQ对话框的句柄，我们就可以使用其他API函数来模拟用户操作，比如...
在本项目中，我们主要探讨的是使用Qt框架来编写一个类似于QQ对话框的应用程序。Qt是一个跨平台的C++库，广泛应用于图形用户界面（GUI）开发，支持Windows、Linux、MacOS等多个操作系统。它提供了丰富的API和工具，...
通过上述分析可以看出，实现类似QQ对话框的隐藏功能不仅涉及窗口管理和消息处理的基本原理，还需要对MFC类库有一定的了解。掌握了这些知识后，开发者就可以轻松地在自己的应用中加入这种实用且美观的效果。
在这个源码包中，我们主要关注的是如何构建一个类似于QQ的对话界面，并进行有效的功能测试，以确保用户体验和软件稳定性。下面将详细阐述相关知识点： 1. **UI设计**：QQ对话框的设计需要考虑用户友好性和一致性，...
10. **可维护性和扩展性**：编写代码时，遵循良好的编程规范和模块化设计，以便于后期的维护和功能扩展。 通过以上知识点的组合应用，我们可以实现一个既美观又实用的“链接三方QQ随屏幕滚动而滚动的QQ对话框”，为...
### 实现网页中调出QQ对话框 在互联网应用中，提供便捷的沟通方式对于提升用户体验至关重要。在本文中，我们将详细介绍如何在网页上实现调用QQ对话框的功能。这不仅可以帮助用户更快地与网站管理员或客服人员取得...
怎样做出在网页中弹出QQ临时对话框 在网页中弹出QQ临时对话框是一个常见的需求，然而实现这种功能却需要一些技术手段和腾讯QQ提供的API。下面我们将一步步地介绍如何实现这个功能。 首先，我们可以使用HTML的a标签...
【QQ发送文件文件夹选择对话框源码】的实现是一个典型的Windows应用程序开发任务，涉及到桌面应用界面设计、文件操作和用户交互。以下是对这个项目的关键知识点的详细解释： 1. **对话框（Dialog Box）**：在...
`dialog()`方法接受一个可选的参数对象，用于配置对话框的行为。常见的选项包括： - `width` 和 `height`：设置对话框的宽度和高度。 - `modal`：设置是否为模态对话框，阻止用户与对话框外的元素交互。 - `...
QQ基本对话框是Qt编程框架下创建的一个简单应用示例，主要面向初学者展示如何在Qt环境中构建一个基本的交互式对话窗口。Qt是一个跨平台的C++图形用户界面库，广泛应用于桌面、移动和嵌入式设备上的应用程序开发。...
QQ冒泡对话框是设计和实现聊天应用时一个常见的元素，尤其在移动端的应用中，它以其独特的视觉效果和用户友好的交互方式，为用户提供了一种类似真实生活中对话体验的界面。这种对话框的设计通常会将每条消息以气泡的...
在IT行业中，创建类似QQ提示框的超炫对话框是一项常见的任务，特别是在开发桌面应用程序时。这类对话框通常用于提供用户交互，如消息通知、提醒或确认操作。在这个主题下，我们将深入探讨如何使用VC++（Visual C++）...
在移动应用开发领域，对话框（Dialog）是用户界面中不可或缺的部分，用于向用户提供临时信息或者需要用户进行简短交互的场景。本项目名为“仿QQ和仿iPhone的对话框”，旨在为Android开发者提供一种创建类似QQ和...
- 使用图形用户界面（GUI）框架：为了创建类似QQ的对话框，我们需要使用GUI框架，如Java的Swing或JavaFX，Python的Tkinter或Qt，C#的WPF等。这些框架提供了一系列组件和布局管理器来构建用户界面。 2. **对话框...