简单实现侧栏拖拉改变宽度（二）

博客写好-开发CV

已于 2022-02-16 22:53:42 修改

阅读量408

点赞数 1

分类专栏：前端文章标签： javascript 侧栏拖拽

于 2022-02-16 20:58:38 首次发布

本文链接：https://blog.csdn.net/weixin_44915419/article/details/122971757

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上次实现拖拽改变侧栏的宽度，但是不能隐藏侧栏，这次简单实现一下
代码效果如下
请添加图片描述
代码实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .app {
      width: 100%;
      height: 100vh;
      background-color: aliceblue;
      display: flex;
    }

    #slide-bar-box {
      width: 200px;
      height: 100%;
      background-color: #999;
      position: relative;
    }

    #slide-bar {
      color: red;
      font-size: 50px;
      text-align: center;
      padding-right: 6px;
    }

    #drag-btn {
      width: 6px;
      height: 100%;
      background-color: transparent;
      cursor: w-resize;
      position: absolute;
      right: 0;
      top: 0;
    }

    .right {
      height: 100%;
      flex: 1;
      background-color: antiquewhite;
      color: red;
      font-size: 50px;
      text-align: center;
      position: relative;
    }

    #close-btn {
      position: absolute;
      top: 0;
      right: 0;
    }

    #open-btn {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="app">
    <div id="slide-bar-box">
      <div id="slide-bar">侧栏</div>
      <button id="close-btn">关闭</button>
      <div id="drag-btn"></div>
    </div>
    <div class="right"><button id="open-btn">打开</button>右侧</div>
  </div>
</body>
<script>
  let slideBarWidth = 200;//默认为200
  function init() {
    dragSlidBar(20);
    closeSlideBar();
    openSlideBar();
  }
  init();//执行

  /**
     * delay: 防抖时间
     */
  function dragSlidBar(delay) {
    const dragBtn = document.getElementById("drag-btn");
    const slideBarBox = document.getElementById("slide-bar-box");
    //鼠标按下
    dragBtn.onmousedown = function (e) {
      //记录鼠标开始位置
      let startX = e.clientX;
      //防抖初始时间
      let init_time = 0;
      //给得是document绑定事件
      document.onmousemove = function (e) {
        // 防抖
        let now_time = new Date();//现在时间
        if (now_time - init_time > delay) {//满足时间则执行
          init_time = now_time;
          //记录鼠标位置
          let endX = e.clientX;
          //计算鼠标移动距离
          let moveX = endX - startX;
          // 更新鼠标初始位置
          startX = endX;
          // 更新盒子宽度
          slideBarWidth += moveX
          // 边界值处理
          if (slideBarWidth < 200) {
            slideBarWidth = 200;
          }
          if (slideBarWidth > 400) {
            slideBarWidth = 400
          }
          slideBarBox.style.width = slideBarWidth + 'px';

        }
        return false;//阻止默认事件
      };
      //解除事件
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        // 释放鼠标
        dragBtn.releaseCapture && dragBtn.releaseCapture();
      };
      // 捕获鼠标
      dragBtn.setCapture && dragBtn.setCapture();
      return false;//阻止默认事件
    };
  }
    /**
   * 关闭侧栏
  */
  function closeSlideBar() {
    const closeBtn = document.getElementById("close-btn");
    const slideBarBox = document.getElementById("slide-bar-box");
    const slideBar = document.getElementById("slide-bar");
    closeBtn.onclick = function () {
      slideBarBox.style.transition = "width 1s";
      slideBarBox.style.width = '0px';
      slideBar.style.width = (slideBarWidth - 6) + 'px';
    }
  }
  /**
   * 打开侧栏
  */
  function openSlideBar() {
    const openBtn = document.getElementById("open-btn");
    const slideBarBox = document.getElementById("slide-bar-box");
    const slideBar = document.getElementById("slide-bar");
    openBtn.onclick = function () {
      slideBarBox.style.width = slideBarWidth + 'px';
      setTimeout(()=> {
        slideBarBox.style.transition = "width 0s";
      },1000);
      slideBar.style.width = "auto";
    }
  }
</script>

</html>

嗯嗯，就这样咯，有问题请指正；
觉得有用就给个赞吧

博客写好-开发CV

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单实现侧栏拖拉改变宽度（二）

上次实现拖拽改变侧栏的宽度，但是不能隐藏侧栏，这就简单实现一下代码效果如下代码实现<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫