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 相关文章推荐
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
微信小程序自定义轮播图
Nov 04 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
随机头像PHP版
2006/10/09 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php中socket的用法详解
2014/10/24 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
微信支付开发发货通知实例
2016/07/12 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
Js基础学习资料
2010/11/23 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
js实现无缝滚动图
2017/02/22 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python切片操作去除字符串首尾的空格
2019/04/22 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
教师四风问题对照检查材料
2014/09/26 职场文书
整改报告怎么写
2014/11/06 职场文书
2014年团工作总结
2014/11/27 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Java完整实现记事本代码
2022/06/16 Java/Android