拖动鼠标调整右侧显示区的宽度
1、右侧的区域
2、拖动的一条竖线
3、鼠标事件
4、结合原生js和jQuery
实现如下:
(1)css代码
*{margin: 0;padding: 0;} .content{ width: 100%; height: 500px; background: #CCCCCC; } .left{ width: 60%; height: 500px; background: green; } #right-sidebar-log{ position: absolute; right: 0; top: 0; width: 40%; height: 500px; background: red; } #linetoggle{ position: absolute; left: 0; width: 2px; height: 500px; border-left: 2px solid #000000; cursor: e-resize; }
(2)HTML内容
<div class="content"> <div class="left"></div> <div id="right-sidebar-log"> <div id="linetoggle"></div> </div>
</div>
(3)js实现
function Se(id) { return document.getElementById(id) } window.onload = function() { var oBox = Se("box"), oBottom = Se("right-sidebar-log"), oLine = Se("linetoggle"); $("#linetoggle").on("mousedown",function (e) { var Cwide=$("#right-sidebar-log").width(); var disX = (e || event).clientX; document.onmousemove = function(e) { var Cx=(e || event).clientX; var MoveX = disX - Cx; oBottom.style.width = Cwide + MoveX + "px"; return false }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }); }
(4)效果如下
拖动中间的竖线,右边的宽度会随之改变