文档章节

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

lgscofield
 lgscofield
发布于 2015/06/26 13:58
字数 683
阅读 8
收藏 0
一款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>

本文转载自:http://lgscofield.iteye.com/blog/1629948

共有 人打赏支持
lgscofield

lgscofield

粉丝 20
博文 140
码字总数 63036
作品 0
南京
架构师
基于图像处理操作 QQ 的工具 - foolqq

基于图像处理操作QQ的工具foolqq 目前读写QQ的机器人都是基于爬虫分析smartqq报文来实现的,然而smartqq腾讯已经不再维护,其HTTP服务端经常不可用,且经常需要不定时的重启,foolqq应运而生...

mohuan
2017/10/15
312
2
深度文件管理器 V1.6 正式发布

深度文件管理器是深度科技开发的一款功能强大、简单易用的文件管理工具。 它沿用了经典文件管理器的功能和布局,并在此基础上简化了用户操作,增加了很多特色功能。一目了然的导航栏、智能识...

王练
2017/10/26
2.6K
16
RecyclerView进阶

上篇文章我们讲解了RecyclerView的基本使用,本篇就让我们承接上篇文章讲下RecyclerView的进阶使用。 没看过上篇的朋友可以点击右边的传送门:《RecyclerView基本使用》 背景 RecyclerView有...

安卓小哥
2017/12/26
0
0
基于 HTML5 的工业互联网云平台监控机房 U 位

前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业...

xhload3d
07/09
0
0
WPF/Silverlight深度解决方案:(十三)完美自定义之ChildWindow

ChildWindow在所有应用领域中都是必不可缺的好工具,小到一个弹出的确认对话框;大到包含众多复杂参数、选项及数据列表的资源窗口,都可以通过它来分类实现。ChildWindow的好处是可以实现拖动...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

sqlserver 2008 r2 直接下载地址(百度云)

之前下载的sqlserver2008发现不能附加,就卸载了,重新找到了sqlserver2008R2的百度云资源 卸载sqlserver2008还是有点麻烦,不过就是需要删除注册表中的信息 自己来回卸载了3次终于重装sqlse...

dillonxiao
39分钟前
1
0
[Java]JVM调优总结 -Xms -Xmx -Xmn -Xss

JVM调优总结 -Xms -Xmx -Xmn -Xss 博客分类: Java General JVM应用服务器电信CMS算法 堆大小设置 JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可...

morpheusWB
50分钟前
1
0
C++ std::function 和 std::bind

C++11提供了std::function和std::bind两个工具,用于引用可调用对象。这些可调用对象包括 普通函数,Lambda表达式,类的静态成员函数,非静态成员函数以及仿函数等。引用可调用对象,可以用于...

yepanl
今天
2
0
python:可迭代对象的索引

关于 python的range的用法: 注意是[ 开始,结束)的半开区间,不包括结束 http://www.runoob.com/python/python-func-range.html import collectionsfrom collections import Iterable字符串......

Oh_really
今天
3
0
docker-compose ,docker-stack

1.例子 version: "3"services: php: image: registry.cn-hangzhou.aliyuncs.com/lxepoo/apache-php5 ports: - "38080:80" networks: - my_php_mysql volum......

chenbaojun
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部