<!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>