<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>js实现左侧菜单拖动改变宽度</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css样式不建议使用id选择器,此处为方便暂时使用, 请见谅 */
* {margin: 0;padding: 0;}
html,body {height: 100%;text-align: center;}
body {position: relative;}
.top {width: 100%;height: 88px;background-color: #ccc;}
#left {position: absolute;top: 88px;right: 0;bottom: 0;left: 0;width: 220px;}
#menu {width: 100%;height: 100%;}
#drap-line {position: absolute;top: 0;right: 0;width: 4px;height: 100%;background-color: #999;cursor: e-resize;}
#right {position: absolute;top: 88px;right: 0;bottom: 0;left: 220px;}
</style>
</head>
<body>
<div class="top">顶部导航</div>
<div id="left">
<div id="menu">
<span>待拖拽的div</span>
</div>
<div id="drap-line"></div>
</div>
<div id="right">
右边的div
</div>
<script>
//获取dom函数
function $(id) {
return document.getElementById(id)
}
//设置最大/最小宽度
var max_width = 400,
min_width = 200;
//获取dom
var drapLine = $('drap-line'),
left = $('left'),
right = $('right');
//记录鼠标相对left盒子x轴位置
var mouse_x = 0;
//鼠标移动事件
function mouseMove(e) {
var e = e || window.event;
var left_width = e.clientX - mouse_x;
left_width = left_width < min_width ? min_width : left_width;
left_width = left_width > max_width ? max_width : left_width;
left.style.width = left_width + 'px';
right.style.left = left_width + 'px';
}
//终止事件
function mouseUp() {
document.onmousemove = null;
document.onmouseup = null;
//localStorage设置
localStorage.setItem('sliderWidth', left.style.width)
}
window.onload = function () {
//localStorage读取
var history_width = localStorage.getItem('sliderWidth');
if (history_width) {
left.style.width = history_width;
right.style.left = history_width;
}
//绑定鼠标按下事件
drapLine.onmousedown = function (e) {
var e = e || window.event;
//阻止默认事件
e.preventDefault();
mouse_x = e.clientX - left.offsetWidth;
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
}
}
</script>
</body>
</html>
---------------------
作者:yun_hou
来源:CSDN
原文:https://blog.csdn.net/yun_hou/article/details/87803705
版权声明:本文为博主原创文章,转载请附上博文链接!
js 实现左侧菜单拖动改变宽度
最新推荐文章于 2024-06-25 10:11:02 发布