实现左侧抽屉效果

最新推荐文章于 2023-08-10 12:12:40 发布

J20220913

最新推荐文章于 2023-08-10 12:12:40 发布

阅读量477

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/J20220913/article/details/129191387

版权

左侧抽屉效果

这里为了方便,直接用的jQuery

创建一个html文件


//html 结构
<div class="box">
        <input type="button" value="open">
        <div id="asider">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="close">关闭</div>
        </div>
        //这个是遮罩层
        <div class="mask"></div>
    </div>

css样式

  #asider {
      position: fixed;
      top: 0;
      left: -50vw;
      background-color: aqua;
      width: 50vw;
      height: 100%;
      z-index: 100;      //这里的显示层级一定要比遮罩层高,不然抽屉打开关不上
      transition: all 0.5s;    //设置0.5秒过度会比较好看
  }

  .mask {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;      //上下左右都是0表示全屏遮罩
      background: rgba(0, 0, 0, .25);    遮罩透明度
      display: none;
      z-index: 50;
  }

js部分的代码

//引入jQuery,
<script type="text/javascript" src="./jquery.js"></script>
  <script type="text/javascript" type="module">
      $(function(){
          $('[type=button]').on('click',function(){
              $('#asider').css({'left':0})
              $('.mask').css({ "display": 'block' })  //遮罩显示
              document.body.style.overflow='hidden' //禁止滑动
          })
          $('.close').on('click',function(){
              $('#asider').css({'left':-50+'vw'})
              document.body.style.overflow = 'visible'  //关闭抽屉,解除禁止滑动
              $('.mask').css({ "display": 'none' })  //隐藏遮罩
          })
      })     
  </script>

这样就成功了,是不是非常的简单

下面是整个代码

<!DOCTYPE html>
<html lang="en">

<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>
        #asider {
            position: fixed;
            top: 0;
            left: -50vw;
            background-color: aqua;
            width: 50vw;
            height: 100%;
            z-index: 100;
            transition: all 0.5s;
        }
        .mask {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, .25);
            display: none;
            z-index: 50;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="button" value="open">
        <div id="asider">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="close">关闭</div>
        </div>
        <div class="mask"></div>
    </div>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" type="module">
        $(function () {
            $('[type=button]').on('click', function (e) {
                $('#asider').css({ 'left': 0 })
                $('.mask').css({ "display": 'block' })  //遮罩显示
                document.body.style.overflow = 'hidden' //禁止滑动
            })
            $('.close').on('click', function (e) {
                $('#asider').css({ 'left': -50 + 'vw' })
                document.body.style.overflow = 'visible'  //关闭抽屉,解除禁止滑动
                $('.mask').css({ "display": 'none' })  //隐藏遮罩
            })
        })

    </script>
</body>

</html>