• js实现鼠标拖拽改变div大小的同时另一个div宽度也变化

    实现效果如下图所示

    源码如下

    1. DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			.box {
    8. 			 	width: 100%;
    9. 			    height: 300px; 
    10. 				display: flex;
    11. 			}
    12. 			/*左侧div样式*/
    13. 			.left {
    14. 			    width: calc(30% - 5px);  /*左侧初始化宽度*/   
    15. 			    height: 100%;
    16. 			    background: #36cfc9; 
    17. 				float: left;
    18. 			}
    19. 			/*拖拽区div样式*/
    20. 			.resize {
    21. 			    cursor: col-resize; 
    22. 			    position: relative; 
    23. 			    background-color: yellow; 
    24. 			    width: 5px;
    25. 			    height: 300px;
    26. 			    background-size: cover;
    27. 			    background-position: center; 
    28. 			    font-size: 32px; 
    29. 				float: left;
    30. 			}
    31. 			/*拖拽区鼠标悬停样式*/
    32. 			.resize:hover {
    33. 			    background-color: #444444;
    34. 			}
    35. 			/*右侧div'样式*/
    36. 			.mid { 
    37. 				float: left;
    38. 			    width: 70%;   /*右侧初始化宽度*/
    39. 			    height: 100%;
    40. 			    background-color: #b7eb8f; 
    41. 			}
    42. 		style>
    43. 	head>
    44. 	<body>
    45. 		<div class="box" id="box">
    46. 			<div class="left" id="left">
    47. 				
    48. 			div>
    49. 			
    50. 			<div id="resize" class="resize" title="收缩侧边栏"> 
    51. 			div>
    52. 			<div class="mid" id="right">
    53. 				
    54. 			div>
    55. 		div>
    56.  
    57. 	body>
    58. html>
    59.  
    60. <script>
    61. let resize = document.getElementById('resize');
    62. let left = document.getElementById('left');
    63. let mid = document.getElementById('right');
    64. let box = document.getElementById('box'); 
    65.   
    66. // 鼠标按下事件
    67. resize.onmousedown = function (e) {
    68.  	// 记录坐标起始位置
    69. 	let startX = e.clientX;
    70. 	
    71. 	// 左边元素起始宽度
    72. 	left.left = left.offsetWidth;
    73. 	console.log('宽度：',resize.left);
    74. 	// 鼠标拖动事件
    75. 	document.onmousemove = function (e) {
    76. 		// 鼠标拖动的终止位置
    77. 		let endX = e.clientX;  
    78. 		
    79. 		// （endx-startx）= 移动的距离
    80. 		//  resize.left + 移动的距离 = 左边区域最后的宽度
    81. 		let moveLen = left.left + (endX - startX); 
    82. 		console.log(moveLen);
    83. 		
    84. 		 // 左右两边区域的总宽度 = 大容器宽度 - 中间区域拖拉框的宽度 
    85. 		let maxWidth = box.clientWidth - resize.offsetWidth; 
    86. 		
    87. 		// 限制左边区域的最小宽度为30px
    88. 		if (moveLen < 30) moveLen = 30; 
    89. 		
    90. 		// 右边区域最小宽度为 150px 限制左边区域到150后不能再拉宽
    91. 		if (moveLen > maxWidth - 420) moveLen = maxWidth - 420; 
    92.  
    93.  
    94. 		// 设置左边区域的宽度，通过换算为百分比的形式，实现窗体放大缩小自适应 
    95. 		console.log(moveLen / maxWidth * 100);
    96. 		// left.style.width =(moveLen / maxWidth * 100) + '%';
    97. 		left.style.width = moveLen  + 'px';
    98. 				
    99. 		// 右边区域即是总大小 - 左边宽度 - 拖动条宽度
    100. 		console.log(((maxWidth - moveLen) / maxWidth * 100));
    101. 		mid.style.width = (maxWidth - moveLen)+ 'px';
    102. 		console.log(moveLen)
    103. 	};
    104. 	// 鼠标松开事件
    105. 	document.onmouseup = function (evt) {
    106. 		console.log(11)
    107. 		document.onmousemove = null;
    108. 		document.onmouseup = null;
    109. 		resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
    110. 	};
    111. 	resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
    112. 	return false;
    113. };
    114.  
    115. script>

  • 相关阅读:
    【NestJS系列】核心概念：Module模块
    Mysql高级篇学习总结14：子查询优化、排序优化、GROUP BY优化、分页查询优化
    Python数据挖掘：入门、进阶与实用案例分析——自动售货机销售数据分析与应用
    多线程消息处理
    【前端】CSS定位
    在java应用程序中使用spring
    Android.bp语法和使用方法讲解
    asp.net特色商品购物网站系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
    浅谈支付系统的业务精细化监控
    猫头虎分享已解决Bug || SyntaxError: Unexpected token ＜ in JSON at position 0
  • 原文地址：https://blog.csdn.net/Mr_yangx/article/details/136236690