文档章节

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

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

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

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

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

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

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

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

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

xhload3d
2018/07/09
0
0
Parallax TableView Controller

实现类似Path 2.0应用的列表效果。在列表的第一行加上图片,当手指往下拉动列表时,第一行的图片下面的部分会显示出来,即所谓的parallax effect。从整体来看,列表上半部分显示图片,图片可...

匿名
2012/07/06
570
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
51分钟前
0
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部