<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8"/>
<style type="text/css">
*{padding:0;margin:0;list-style:none;}
body,html{height:100%;}
body{padding:0 40px;}
.box{position:relative;height:calc(100% - 200px);}
.bar{height:100%;width:7px;background:#d6d6d6;position:absolute;z-index:1;left:250px;top:0;cursor: e-resize;opacity:0;}
.bar:hover{opacity:1;}
.left-part{position:absolute;left:0;width:250px;top:0;bottom:0;border:1px solid #ddd;}
.right-part{position:absolute;right:0;top:0;bottom:0;width:calc(100% - 250px);}
.bar:after {display: block;position: absolute;left: 0;top: 50%;margin-top: -50px;width: 7px;height: 100px;content: " ";cursor: pointer;background: url(arrow.jpg) no-repeat center;}
.resetBar:after{background:none;cursor:e-resize;}
</style>
</head>
<body>
<div style="height:200px;background:red;"></div>
<div class="box">
<div class="left-part" id="leftPart">左侧</div>
<div id="bar" class="bar resetBar"></div>
<div class="right-part" id="rightPart">右侧</div>
</div>
<script type="text/javascript">
var bar = document.getElementById('bar')
var leftPart = document.getElementById('leftPart')
var rightPart = document.getElementById('rightPart')
var defaultWidth = 250 // 默认宽度
var ismove = false // 用来判断是否移动了,区分点击和移动
var startx = 0,x,oldx = defaultWidth;
bar.addEventListener('mousedown', function (e) {
ismove = false
e.preventDefault();
startx = e.clientX
function move(e) {
ismove = true
x = oldx + e.clientX - startx
// 设置它距离左边最小值
if (x < 200) {
x = 200
}
bar.style.left = x+'px'
}
function up(e) {
// 如果没有移动相当于发生了点击事件
if(ismove) {
leftPart.style.width = x + 'px'
rightPart.style.width = 'calc(100% - '+ x +'px)'
oldx = x
// 如果距离默认值,设置可以点击回到默认状态
if (x != defaultWidth && bar.classList.contains('resetBar')) {
bar.classList.remove('resetBar')
}
} else {
var top = bar.getBoundingClientRect().top
// 相当于点击了箭头
if(e.clientY - top >= (bar.offsetHeight/2-50) && e.clientY - top <= (bar.offsetHeight/2+50)) {
leftPart.style.width = defaultWidth + 'px'
rightPart.style.width = 'calc(100% - '+ defaultWidth +'px)'
bar.style.left = defaultWidth + 'px'
oldx = defaultWidth
bar.classList.add('resetBar')
}
}
document.removeEventListener('mousemove',move)
document.removeEventListener('mouseup',up)
}
document.addEventListener('mousemove', move, false)
document.addEventListener('mouseup', up, false)
}, false)
</script>
</body>
</html>