拖动红条改变显示区域高度

最新推荐文章于 2023-04-13 16:26:13 发布
最新推荐文章于 2023-04-13 16:26:13 发布
阅读量321 收藏
点赞数
分类专栏： java基础

Ref:   http://www.jb51.net/article/73300.htm

1、上下拖动红条改变显示区域高度：

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS+CSS上下两部分可拖动改变div层高度的代码丨</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="" title="">菜单导航特效</a></li>
    <li><a href="" title="">图层样式特效</a></li>
    <li><a href="" title="">链接文本特效</a></li>
    <li><a href="" title="">图形图像特效</a></li>
    <li><a href="" title="">鼠标特效代码</a></li>
    <li><a href="" title="">页面窗口特效</a></li>
    <li><a href="" title="">网页背景特效</a></li>
    <li><a href="" title="">日期时间特效</a></li>
    <li><a href="" title="">页面搜索特效</a></li>
    <li><a href="" title="">表格表单特效</a></li>
    <li><a href="" title="">其他网页特效</a></li>
    </ul>
    </div>
    <div id="bottom">
    <ul>
    生活常识
    <li><a href="">生活常识</a></li>
    <li><a href="">健康知识</a></li>
    <li><a href="">美容瘦身</a></li>
    <li><a href="">减肥瘦身</a></li>
    <li><a href="">美容护肤</a></li>
    <li><a href="">饮食常识</a></li>
    <li><a href="">养生之道</a></li>
    <li><a href="">电脑知识</a></li>
    <li><a href="">投资理财</a></li>
    <li><a href="">服饰常识</a></li>
    <li><a href="">社交礼仪</a></li>
    </ul>
    </div>
    <div id="line"></div>
    </div>
    </body>
    </html>
    <br><br><hr><p align="center"><font color=black>呵呵</font></p>

2、左右拖动红条改变显示区域宽度：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右可拖动的内容显示区</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;}
#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;}
#top{background:green; float:left}
#bottom{background:skyblue;float:right}
#line{position:absolute;top:0;left:50%;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;}
</style>
<script>
function $(id) {
 return document.getElementById(id) 
}
window.onload = function() {
 var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line");
 oLine.onmousedown = function(e) {
 var disX = (e || event).clientX;
 oLine.left = oLine.offsetLeft;
 document.onmousemove = function(e) { 
  var iT = oLine.left + ((e || event).clientX - disX);
 var e=e||window.event,tarnameb=e.target||e.srcElement;
  var maxT = oBox.clientWight - oLine.offsetWidth;
  oLine.style.margin = 0;
  iT < 0 && (iT = 0);
  iT > maxT && (iT = maxT);
  oLine.style.left = oTop.style.width = iT + "px";
  oBottom.style.width = oBox.clientWidth - iT + "px";
 $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName;
  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>左右拖动红条改变显示区域宽度<span id="msg"></span></center>
<div id="box">
 <div id="top">
 <ul>
 <li><a href="#" target="_blank">jQuery初学实例代码集</a></li><li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li>
  <li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li>
  <li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li>
  <li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li>
  <li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li>
  <li><a href="#" target="_blank">jQuery平滑图片滚动</a></li>
  <li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li>
  <li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li>
  <li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li>
 </ul>
 </div>
 <div id="bottom">
 <ul>
 <li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li>
  <li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li>
  <li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li>
  <li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li>
  <li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li>
  <li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li>
  <li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li>
  <li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li>
  <li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li>
  <li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li>
 </ul>
 </div>
 <div id="line"></div>
</div>
</body>
</html>

Cadence_D
关注
专栏目录
JS实现左右拖动改变内容显示区域大小的方法
11-25
本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法。分享给大家供大家参考。具体如下： 这里演示左右可拖动的内容显示区效果，左右拖动红条改变显示区域宽度大小，往左拖则全部显示右侧内容，往右拖则全部显示左则内容，类似QQ的聊天窗口一样，可以向上或向下拖动大小，以适合使用者的要求。本代码完全JavaScript与CSS代码结合实现，在各主流浏览器内运行的兼容性也不错，左右拖动改变大小的JS代码推荐给大家。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-drug-cha-area-show-demo/ 具体代码如下： <!DOCTYP
vue如何实现垂直方向拖拽容器改变高度
weixin_45644355的博客
04-19 968
1.定义一个指令方法： Vue.directive('drag-log', { bind(el, binding) { const dragbar = el.querySelector('.dragbar') dragbar.onmousedown = (e) => { if (e.target.classList.contains('header')) return; // if (!e.altKey) retu
android 动态修改高度,在Android上动态更改线性布局宽度或高度
weixin_31478029的博客
05-25 873
我试图动态地改变线性布局或任何其他小部件的宽度或高度，但抛出异常。我的布局是：android:id="@+id/abc"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">android:layout_width="fill_parent"and...
鼠标拖动变化大小
weixin_44484520的博客
04-16 535
开发工具与关键技术：Visual Studio 2015 JavaScript 作者：宁佐潮 撰写时间：2019.4.12 如何用鼠标拖动元素变化大小，首先获取要这个元素，然后分为三个阶段，第一步是鼠标按下时，得到鼠标当前的位置，还要获取到元素当前的宽高，宽高值记得用parseInt转换成数字，因为没见转换前的宽高都是带有单位px，在后面不能直接用于计算，第二步就是鼠标移动时，给选中元素不停的赋...
JS——实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围
wwf1225的博客
01-28 684
https://blog.csdn.net/bettergg/article/details/89206568 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
2016.5.24 广联达红条修复、损坏修复（官方流出）
05-24
2016年5月24日，官方发布了一个特别的更新，针对用户遇到的“红条”问题进行了修复。这里的“红条”通常指的是软件在处理数据或运行过程中出现的错误提示，可能影响用户的正常工作流程。以下是关于这个修复更新的...
广联达红条清理工具
10-12
"广联达红条清理工具"是一款专门针对广联达软件使用过程中可能出现的"红条"问题而设计的辅助工具。在建筑工程造价管理领域，广联达软件是广泛应用的专业软件，它能帮助用户进行工程量清单编制、造价计算以及工程项目...
Android 实现布局高度跟随手指增高降低
最新发布
qq_19688207的博客
04-13 493
【代码】Android 实现布局高度跟随手指增高降低。
clientWidth等指的是什么
familyX的专栏
12-17 7022
scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度） clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。scrollHeight: 获取对象的滚动高度。offsetHeight:获取对象相对于版面或由父坐标
javascript实现鼠标拖动改变层大小的方法
10-24
主要介绍了javascript实现鼠标拖动改变层大小的方法,涉及javascript操作鼠标事件及样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
android 动态改变高度,android 动态设置View的高度和宽度
weixin_39630855的博客
05-28 4047
LinearLayout.LayoutParams linearParams =(LinearLayout.LayoutParams) TextView.getLayoutParams(); //取控件textView当前的布局参数linearParams.width = 40;// 控件的宽强制设成30linearParams.height =40;// 控件的高强制设成20TextView.s...
可拖拽边框改变div宽度的管理界面——jQuery UI 实现
热门推荐
rinsmelody的博客
07-11 1万+
许多时候，我们需要用户可以调整网页中div的大小，当用户增大一个div的宽度时，需要同时减小临近div的宽度，以防止网页宽度发生变化。这里，我们使用了jQuery UI来帮助我们实现。因此我们需要引入jQuery和jQuery UI。 主体HTML代码： 效果图： 当用户拖拽两条黑框中所示的div边缘时，边缘两侧div的大小都会发生
Android 实现一个可以拖动大小，移动区域的矩形框
Cat的专栏
07-07 1万+
这个标题好难取啊，真的不太好用文字表达这个意思。还是来张图吧。 就像这样的一个矩形框，是可以通过拖动边角来改变大小的，同时，拖动非边角的区域，还可以移动这个矩形框。 嗯，想实现的就是这样的一个矩形框。（当然是不包括这只猫的，蟹蟹~） 对了，图中的矩形框的4个顶角旁边的线条加粗了，这个也不去实现了。 先放出我的实现效果，图片基本看不出来，反正你要想象它是可以拖动改变大小，并且可以...
页面拖拽更改左右宽度
liluo_1227的博客
07-12 730
效果图 代码部分 <div class="box" ref="box"> <div class="left pd20" ref="left1"> <div style="height:100%"> <el-input v-model="search.roleName" placeholder="搜索角色" clearable .
Android图片左右切换和拖动大小
weixin_33676492的博客
09-28 325
2019独角兽企业重金招聘Python工程师标准>>> ...
[转]多线程情况下HttpClient的使用
Fair_Jm的专栏
08-28 552
本文转截自:http://www.thinkingquest.net/articles/210.html   3.x版本的httpclient属于apache的commons项目。 从4.x开始，httpclient被转移到了httpcomponent项目下。 api也发生了重大的变化。 http 3.x已经不推荐使用。使用3.x版本的地方，官方建议都升级到4.x版本。 本文的api也都...
设计模式笔记-Flywight模式
俊哥有个Blog
05-29 732
享元模式。Flywight是轻量级的意思，翻译成享元算是意译吧！其定义为：运用共享技术有效地支持大量细粒度的对象！举个例子，文档编辑器程序中如果一个字符对应一个对象，那一篇文档所有字符对象将非常的耗费内存。实际上，所有字符的个数是有限的，只是有些地方字符的一些属性：颜色、大小等不太一样！因此，可以将有限的字符对象构建后共享出来，这些是他们的内部状态，存储在flywight中；其它如颜色、大小等属性
vue模块拖拽效果
b002843508509502的博客
03-08 348
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑。 现在闲来无事，把这个东西实现了一下。 原理很简单，写的很方便。 数据驱动，建立一个数组，数组初始长度为1 拖动触发时，添加一个对象到数组中，拖动的是下标为0的对象，新建的还在原来位置放着，等待下次拖动。 话不多说，上代码 <template> <div cl...
纳米磁性矿物质磁各向异性研究——红条毛肤石鳖齿舌牙齿内
"红条毛肤石鳖齿舌牙齿内纳米磁性矿物质的磁各向异性研究 (2009年)" 这篇2009年的科研论文深入探讨了红条毛肤石鳖齿舌牙齿内纳米磁性矿物质的磁各向异性特性。磁各向异性是指材料的磁性质在不同方向上的差异，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值