js 实现用div 上下分屏

之前用的frameSet，但是在谷歌浏览器下有bug，所以自己查资料写了个用js 实现的div 上下分屏demo,下面的div 高度还可以任意拖动，以后有需要的可以直接拿去修改yoga了。

<!DOCTYPE html>
<html>
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>上下分屏</title><style type="text/css">body {/*font: 14px/1.5 Arial;color: #666;*/}#box {position: relative;width: 100%;height: 500px; border: 2px solid #000;margin: 10px auto;/*overflow: hidden;*/}#box div {position: absolute;width: 100%;} #top, #bottom {height: 50%;overflow: hidden;}#bottom {top: 50%;}#line {top: 50%;height: 4px;/*overflow: hidden;*//*margin-top: -2px;*/background: #CCCCCC;/*text-align: center;*/border-style: solid;border-width: 1px;cursor: n-resize;}</style>
</head><body><div>AAAAAAAAAAAA</div><div>AAAAAAAAAAAA</div><div>AAAAAAAAAAAA</div><div>AAAAAAAAAAAA</div><div id="box" style=""><div id="top" style=""><p>BBBBBBBBBBBB</p><p>BBBBBBBBBBBB</p><p>BBBBBBBBBBBB</p><p>BBBBBBBBBBBB</p><p>BBBBBBBBBBBB</p></div><div id="bottom" style=""><p>CCCCCCCC</p><p>CCCCCCCC</p><p>CCCCCCCC</p><p>CCCCCCCC</p><p>CCCCCCCC</p></div><div id="line"></div></div>
</body>
</html>
<script>function draggable() {var box = document.getElementById("box");var top = document.getElementById("top");var bottom = document.getElementById("bottom");var line = document.getElementById("line");var boxBoderHeight = (box.offsetHeight - box.clientHeight) / 2;var dragging = null;line.addEventListener("mousedown", function (e) {var e = window.event || e;console.log(e.clientY);dragging = {mouseY: e.clientY,  //有需要左右移动的在此扩展两个属性startY: line.offsetTop};if (line.setCapture) line.setCapture();});line.addEventListener("losecapture", function () {dragging = null;});document.addEventListener("mouseup", function () {dragging = null;}, true);var dragTarget = line.setCapture ? line : document;dragTarget.addEventListener("mousemove", function (e) {if (!dragging) return;if (e.pageY <= box.offsetTop + boxBoderHeight)return;if (e.pageY >= box.offsetTop + box.offsetHeight - line.offsetHeight + boxBoderHeight)return;var e = window.event || e;var lineTop = dragging.startY + (e.clientY - dragging.mouseY);var disY = (e || event).clientY;var iT = line.offsetTop + ((e || event).clientY - disY);var maxT = box.clientHeight - line.offsetHeight;line.style.margin = 0;iT < 0 && (iT = 0);iT > maxT && (iT = maxT);line.style.top = lineTop + "px";bottom.style.height = box.offsetHeight - line.offsetHeight - line.offsetTop + "px";bottom.style.top = lineTop + line.offsetHeight + "px";top.style.height = line.offsetTop + "px";}, true);};window.onload = function () {draggable();}
</script>

js 实现用div 上下分屏相关推荐

html div分屏,js 实现用div 上下分屏
之前用的frameSet,但是在谷歌浏览器下有bug,所以自己查资料写了个用js 实现的div 上下分屏demo,下面的div 高度还可以任意拖动,以后有需要的可以直接拿去修改yoga了. 上下分屏 ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
vue实现分屏_WebRTC如何在Vue.js 配合video标签实现多分屏功能？
TSINGSEE青犀视频研发的视频平台都支持分屏播放,当我们需要通过新的框架来搭建一套新的产品的时候,就要考虑到如何通过新的方式来构建这样一套多屏分割的界面. 我们上次在<我之前做过的所有产品都 ...
vue实现分屏_TSINGSEE青犀视频开发WebRTC如何在Vue.js 配合video标签实现多分屏功能？...
TSINGSEE青犀视频研发的视频平台都支持分屏播放,当我们需要通过新的框架来搭建一套新的产品的时候,就要考虑到如何通过新的方式来构建这样一套多屏分割的界面. 我们上次在<我之前做过的所有产品都 ...
Leaflet实现地图分屏联动
文章目录 1. 实现思路 2. 完整代码 1. 实现思路分别为地图对象绑定缩放.平移监听事件: 监听事件触发后依次为地图对象设置视图,就是将触发事件的地图视图设置到其他地图对象 2. 完整代码 &l ...
leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
mapboxgl地图分屏
介绍地图展示效果在实际工程中会用到分屏和卷帘两种,目前基于ArcGIS Server JS.Leaflet等网上已经大堆的实现,本篇文章介绍基于Mapbox GL JS如何实现地图分屏效果,目前已经 ...

js 实现用div 上下分屏

js 实现用div 上下分屏相关推荐

最新文章

热门文章