JS实现左右拖动改变内容显示区域大小的方法


Posted in Javascript onOctober 13, 2015

本文实例讲述了JS实现左右拖动改变内容显示区域大小的方法。分享给大家供大家参考。具体如下:

这里演示左右可拖动的内容显示区效果,左右拖动红条改变显示区域宽度大小,往左拖则全部显示右侧内容,往右拖则全部显示左则内容,类似QQ的聊天窗口一样,可以向上或向下拖动大小,以适合使用者的要求。本代码完全JavaScript与CSS代码结合实现,在各主流浏览器内运行的兼容性也不错,左右拖动改变大小的JS代码推荐给大家。

运行效果截图如下:

JS实现左右拖动改变内容显示区域大小的方法

在线演示地址如下:

具体代码如下:

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

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 #Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 #Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 #Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 #Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 #Javascript
编写高性能Javascript代码的N条建议
Oct 12 #Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
You might like
ajax在joomla中的原生态应用代码
2012/07/19 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
十大使用PHP框架的理由
2015/09/26 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python交互界面的退出方法
2019/02/16 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
举例详解HTML5中使用JSON格式提交表单
2015/06/16 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
《一件运动衫》教学反思
2014/02/19 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
检讨书1000字
2014/10/11 职场文书
2014年政协工作总结
2014/12/09 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技