zoukankan      html  css  js  c++  java

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

    滑动效果，第一时间能想的是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);
}())

    效果预览    滑动部分，请将浏览器手机调试模式打开预览
  • 相关阅读:
    python(7)-pycharm mac和windows专业版安装破解
    Navicat Premium15激活 安装与激活（转载） 有效！！
    PHP 冒泡排序
    PHP 插入排序 -- 希尔排序
    PHP 插入排序 -- 折半查找
    PHP 插入排序 -- 直接插入排序
    PHP 哈夫曼的实现
    PHP call_user_func的一些用法和注意点
    PHP 组件注册的例子
    PHP 奇葩的debug_zval_dump的输出
  • 原文地址：https://www.cnblogs.com/jellyz/p/12736062.html
Copyright © 2011-2022 走看看