文档章节

类似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

粉丝 22
博文 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

没有更多内容

加载失败,请刷新页面

加载更多

码云项目100,水一发

简单回顾一下: 早期构想最多的,是希望能将PHP一些类和编码分区做得更细,所以很多尝试。但不得不说,PHP的功能过于单一,是的,也许写C/C++扩展,可以解决问题,那我为什么不用C#或者Golan...

曾建凯
今天
3
0
Spring应用学习——AOP

1. AOP 1. AOP:即面向切面编程,采用横向抽取机制,取代了传统的继承体系的重复代码问题,如下图所示,性能监控、日志记录等代码围绕业务逻辑代码,而这部分代码是一个高度重复的代码,也就...

江左煤郎
今天
4
0
eclipse的版本

Eclipse各版本代号一览表 Eclipse的设计思想是:一切皆插件。Eclipse核心很小,其它所有功能都以插件的形式附加于Eclipse核心之上。 Eclipse基本内核包括:图形API(SWT/Jface),Java开发环...

mdoo
今天
3
0
SpringBoot源码:启动过程分析(一)

本文主要分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 还是老套路,先把分析过程的时序图摆出来:时序图-SpringBoot2.10启动分析 二.源码分析 首...

Jacktanger
今天
6
0
小白带你认识netty(二)之netty服务端启动(上)

上一章 中的标准netty启动代码中,ServerBootstrap到底是如何启动的呢?这一章我们来瞅下。 server.group(bossGroup, workGroup);server.channel(NioServerSocketChannel.class).optio...

天空小小
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部