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

最新推荐文章于 2021-12-15 11:07:52 发布

iteye_12903

最新推荐文章于 2021-12-15 11:07:52 发布

阅读量174

点赞数

分类专栏： JavaScript 文章标签： div上下拖动改变显示区域高度

本文链接：https://blog.csdn.net/iteye_12903/article/details/82399282

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

[color=cyan][b]一款JS特效：类似QQ对话框上下部分可拖动的代码，全兼容的，在IE或火狐以及Chrome等浏览器都能正常运行。操作方法：上下拖动红条改变显示区域高度，往上则全部显示下部的内容，往下拖则全部显示上部的内容，推荐给大家。[/b][/color]

<!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>

iteye_12903

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似QQ对话框上下部分可拖动的代码

[color=cyan][b]一款JS特效：类似QQ对话框上下部分可拖动的代码，全兼容的，在IE或火狐以及Chrome等浏览器都能正常运行。操作方法：上下拖动红条改变显示区域高度，往上则全部显示下部的内容，往下拖则全部显示上部的内容，推荐给大家。[/b][/color][code="java"]JS+CSS上下两部分可拖动改变div层高度的代码丨芯晴网页特效丨CsrCode.C...
复制链接

扫一扫