https://blog.csdn.net/bettergg/article/details/89206568
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
< meta http-equiv = "X-UA-Compatible" content = "ie = edge">
<title> Documento </title>
<style>
cuerpo,
html { margin: 0; acolchado: 0; altura: 100%; } #box { ancho: 600px; altura: 500px; desbordamiento: oculto; } #izquierda { ancho: calc (30% - 5px); altura: 100%;
fondo: azul cielo;
flotador izquierdo;
}
#resize { ancho: 5px; altura: 100%; cursor: w-resize; flotador izquierdo; } #right { float: right; ancho: 70%; altura: 100%; fondo: tomate; } </style> </head> <body> <div id = "box"> <div id = "left"> </div> <div id = "resize"> </div> <div id = "right "> </div> <
window.onload = function () { var resize = document.getElementById ("resize"); var left = document.getElementById ("izquierda"); var right = document.getElementById ("derecha"); var box = document.getElementById ("caja"); resize.onmousedown = function (e) { var startX = e.clientX; resize.left = resize.offsetLeft; document.onmousemove = function (e) { var endX = e.clientX; var moveLen = resize.left + (endX - startX); var maxT = box.clientWidth - resize.offsetWidth;
if (moveLen <150) moveLen = 150;
if (moveLen> maxT - 150) moveLen = maxT - 150;
resize.style.left = moveLen;
left.style.width = moveLen + "px";
right.style.width = (box.clientWidth - moveLen - 5) + "px";
}
document.onmouseup = function (evt) { document.onmousemove = null; document.onmouseup = null; resize.releaseCapture && resize.releaseCapture (); } resize.setCapture && resize.setCapture (); falso retorno;
}
</script>
</body>
</html>