touchmove滑动菜单

最新推荐文章于 2024-04-12 01:39:35 发布

qq_45637785

最新推荐文章于 2024-04-12 01:39:35 发布

阅读量198

点赞数 1

本文链接：https://blog.csdn.net/qq_45637785/article/details/103972901

版权

首先我们先把基础样式做出来

 <style type="text/css">
  *{
    padding: 0;
    margin:0; 
  }
    .container{
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden;
    }
    .ulbox{
      width: 120%;
      height: 100%;
      position: absolute;
      left: 0;
      top:0;
      overflow: hidden;

    }
    .ulbox li{
      box-sizing: border-box;
      text-align: center;
      line-height: 200px;
      font-size: 2rem;      
      list-style: none;
      float: left; 
      width: 20%; 
      height:100% ;
      background-color: rgba(123,215,196,0.5);
      border-left: white 0.2rem solid;
    }
  </style>
</head>
<body>
    <div class="container">
      <ul class="ulbox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
</body>

在这里插入图片描述
主容器的·overflow: hidden;很重要不然就会导致如下图的结果

重点是js的代码
首先获取ul的class，以及设置一个初始化的起始点和偏移距离，

 var ulbox = document.getElementsByClassName("ulbox")[0];
     var startX = 0;
     var leftX = 0;

然后通过touchstart的event的.changedTouches[0]的clientX，获取鼠标点下去x轴初始值；
在这里插入图片描述
在通过touchmove的.changedTouches[0]的clientX，实时获取x轴的值；
再让其相减得出偏移值；
让后为了防止，偏移量超出ul的宽度，所以

 if (leftX > 0) {
              leftX = 0;
          }
          if (leftX < -200) {
              leftX = -200;
          }

让其值超出界限时，变为临界值。
在这里插入图片描述
附上原代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dmeo</title>

  <style type="text/css">
  *{
    padding: 0;
    margin:0; 
  }
    .container{
      width: 100%;
      height: 200px;
      position: relative;
      overflow: hidden;
    }
    .ulbox{
      width: 120%;
      height: 100%;
      position: absolute;
      left: 0;
      top:0;
      overflow: hidden;

    }
    .ulbox li{
      box-sizing: border-box;
      text-align: center;
      line-height: 200px;
      font-size: 2rem;      
      list-style: none;
      float: left; 
      width: 20%; 
      height:100% ;
      background-color: rgba(123,215,196,0.5);
      border-left: white 0.2rem solid;
    }
  </style>
</head>
<body>
    <div class="container">
      <ul class="ulbox">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <script type="text/javascript">
     var ulbox = document.getElementsByClassName("ulbox")[0];
     var startX = 0;
     var leftX = 0;
      ulbox.addEventListener("touchstart",function(e){
        console.log(e)
        startX =  e.changedTouches[0].clientX;
     })
     ulbox.addEventListener("touchmove",function(e){
          leftX = e.changedTouches[0].clientX - startX;
          if (leftX > 0) {
              leftX = 0;
          }
          if (leftX < -200) {
              leftX = -200;
          }
          console.log(leftX)
          ulbox.style.left = ""+ leftX +"px"

     })
    </script>
</body>
</html>

qq_45637785

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
touchmove滑动菜单

首先我们先把基础样式做出来 <style type="text/css"> *{ padding: 0; margin:0; } .container{ width: 100%; height: 200px; position: relative; overflow: hidden; } ...
复制链接

扫一扫