未了实现两个div布满屏幕,且宽度可调,做了如下效果,具体效果如下图所示:
页面代码:
<div class="mapBox" id="map2D" ></div> <div id="line"></div> <div class="mapBox" id="map3D" ></div>
css样式
.mapBox{ position: relative; float: left; width: calc(50% - 2px); height: 100%; left: 0; top: 0; /*border: 1px solid black;*/ /*box-sizing: border-box;*/ } #line{ position: relative; float: left; width: 4px; height: 100%; left: 0; top: 0; cursor: w-resize; border: 1px solid red; box-sizing: border-box; }
js代码
var line = $("#line"); var map2D = $("#map2D"); var map3D = $("#map3D"); var box = $("#box"); var isMove = false; var x = 0; line.mousedown(function (e) { isMove = true; x = e.pageX; }); line.mouseup(function () { isMove = false }); box.mouseup(function () { isMove = false }); box.mousemove(function (e) { if (isMove) { console.log(e.pageX); var width2d = map2D.width(); var width3d = map3D.width(); map2D.width(width2d + e.pageX - x); map3D.width(width3d - e.pageX + x); x = e.pageX; } });