JavaScript实现左右分栏宽度拉伸

CSS部分：

<style type="text/css">#left,#right,#middle {height: 100%;position: absolute;}#left {width: 350px;background-color:deepskyblue;overflow:hidden;}#middle {width: 5px;background-color: black;left: 350px;}#middle:hover {cursor: col-resize;}#right {right: 0;background-color: coral;left: 355px;overflow: scroll;width: auto;text-indent: 2em;line-height: 3em;}</style>

HTML部分：

<body><div id="left"></div><div id="middle"></div><div id="right"></div>
</body>

JavaScript：

<script>function getEle(id) {return document.getElementById(id);}window.onload = function () {let left = getEle('left');let right = getEle('right');let middle = getEle('middle');let middleWidth = 5;middle.onmousedown = function (e) {var disX = (e || event).clientX;middle.left = middle.offsetLeft;document.onmousemove = function (e) {let middleLeft = middle.left + ((e || event).clientX - disX);let maxWidth = document.body.clientWidth;middleLeft < 0 && (middleLeft = 0);middleLeft > maxWidth && (middleLeft = maxWidth);middle.style.left = left.style.width = middleLeft + 'px';right.style.width = maxWidth - middleLeft - middleWidth + 'px';right.style.left = middleLeft + middleWidth + 'px';return false;};document.onmouseup = function () {document.onmousemove = null;document.onmouseup = null;middle.releaseCapture && middle.releaseCapture();};middle.setCapture && middle.setCapture();return false;};};
</script>

效果图：

JavaScript介绍：

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

JavaScript脚本语言具有以下特点:

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

JavaScript实现左右分栏宽度拉伸相关推荐

JavaScript实现分页分栏
JavaScript实现分页分栏,实现后的效果图如下: Javascript代码下载地址:http://www.zrscsoft.com/sitepic/12049.html
html页面内分栏显示不全,怎么消除Word文档分栏后栏间不平衡现象
IE10浏览器打开网页鼠标不能滚动查看是怎么回事? IE10浏览器黑屏,但是滚动鼠标就好了,不到一分钟...在控制面板的电源设置中,将显示器的关闭时间调到你希望的时刻就可以了. word文档分栏后左右 ...
手机wps取消不等宽分栏_如何取消分栏 - 卡饭网
Word 2007中取消分栏的技巧 Word 2007中取消分栏的技巧前面我们了解了在Word2007中分栏的设置,相信很多朋友已经学会了,而如果想要对网上下载的分栏文档中进行取消,该怎么办呢?下面 ...
column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
JavaScript（二）--实现分栏
Javascript中讲到了分栏的小实例,这篇文章就写一个小的例子吧,从这个例子中看看我们都学到什么? (一)源代码 <!DOCTYPE html PUBLIC "-//W3C//DT ...
javascript实用小技巧—实现分栏显示
记得给师哥师姐测试考试系统的时候,看到他们的考试页面可以实现隐藏左边的考生信息部分,当时觉得好高大上,好人性化.现在学了javascript,我也能实现这个功能了,下面来显摆一下. 1.页面设计: ( ...
CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
分栏报表-物品清单报表实现
提起分栏报表,它的数据组织形式就如同小时候使用的数学作业本一样,将数据分为多栏显示,当然写作业时有的人习惯横向写,有的人则喜欢竖着写完,在写另一栏.所有的电子技术都是采用隐喻的手法,从物理世界而来,分 ...
利用pdf.js开发嵌入pdf显示，以及利用jquery-ui左右分栏显示
原来考虑用pdf.js的viewer.html页面,但怎么用都不方便.因此直接用pdf.js在左侧连续显示pdf所有内容,右侧显示其它相关内容,并且左右宽度可以任意拖动,最终实现效果如图: 代码: & ...

JavaScript实现左右分栏宽度拉伸

JavaScript实现左右分栏宽度拉伸相关推荐

最新文章

热门文章