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 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
js实现动态改变字体大小代码
2014/01/02 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python调用c++传递数组的实例
2019/02/13 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
django-csrf使用和禁用方式
2020/03/13 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
生产内勤岗位职责
2013/12/07 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
师德承诺书
2015/01/20 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
日元符号 ¥
2022/02/17 杂记