移动端自定义侧滑菜单（滑动）

滑动效果，第一时间能想的是transition，transform。话不多说，上代码

 

css 部分代码

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
}

.page-bottom {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgb(0, 68, 97);
  z-index: 0;
}

.wc {
  color: white;
  /* padding: 30px 0 30px 40px; */
  padding-left: 20px;


}

.wc div {
  line-height: 60px;
  border-bottom: 1px solid white;
}

.page-content {
  padding-top: 100px;
}

.page-top {
  height: 100%;
  position: fixed;
  width: 100%;
  background-color: rgb(57, 125, 230);
  z-index: 0;
  /* transition: All 0.1s linear; */
}

.page-top img {
  position: absolute;
  width: 35px;
  /* height: 38px; */
  left: 20px;
  top: 20px;
  z-index: 111;
}

#btn {
  transition: all 0.4s linear;
  transform: rotate(0deg);
}

html部分代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>移动端自定义侧滑菜单（滑动）</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="page">
    <div class="page-bottom">
      <div class="page-content">
        <div class="wc">
          <div>item1</div>
        </div>
        <div class="wc">
          <div>item2</div>
        </div>
        <div class="wc">
          <div>item3</div>
        </div>
        <div class="wc">
          <div>item4</div>
        </div>
      </div>
    </div>
    <div id="move" class="page-top draggable">
      <img id="btn" src="images/7qmY.png" />
    </div>
  </div>
  <script src="js/index.js"></script>
</body>

</html>

js部分代码

(function () {
  var mark = 0; // 拖动起点 
  var newMark = 0; // 拖动终点
  var open = false; // 展开状态
  var el = document.getElementById('move');
  var elBtn = document.getElementById('btn');
  var width = document.body.clientWidth;
  var changeWidth = width * 0.2;

  elBtn.onclick = function (e) {
    e.stopPropagation();
    if (open) {
      el.style.cssText = "transition: All 0.4s linear; transform: translate3d(0px,0,0);"
    } else {
      el.style.cssText = "transition: All 0.4s linear; transform: translate3d(300px,0,0);"
    }
    open = !open;
  }

  function touchmove(e) {
    newMark = e.touches[0].pageX
    var moveX = Math.ceil(newMark - mark);

    if (open) {
      if (moveX > 0) {
        return
      }
      moveX += 300
    }
    if (moveX > 0) {
      el.style.cssText = "transform: translate3d(" + moveX + "px,0,0);"
    }
  }

  function touchstart(e) {
    mark = newMark = e.touches[0].pageX;
  }

  function touchend(e) {
    if (!e.target.classList.contains("draggable")) {
      return;
    }
    var moveX = Math.abs(newMark - mark);
    if (open) { // 已打开
      if (moveX > changeWidth) {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(0px,0,0);"
        open = !open
      } else {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(300px,0,0);"
      }
    } else {
      if (moveX > changeWidth) {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(300px,0,0);"
        open = !open
      } else {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(0px,0,0);"
      }
    }
    mark = 0
    newMark = 0
  }

  el.addEventListener('touchmove', touchmove, false);
  el.addEventListener('touchstart', touchstart, false);
  el.addEventListener('touchend', touchend, false);
}())

 

效果预览    滑动部分，请将浏览器手机调试模式打开预览

 

posted @ 2020-04-20 10:31  JellyZ  阅读(363)  评论(0)  编辑  收藏  举报