您的位置: 首页  >  文章  >  原生js实现移动端Touch滑动反弹

原生js实现移动端Touch滑动反弹

分类: 文章 • 2024-01-12 10:37:16

源码如下：

  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3.   <head>  
  4.     <meta charset="utf-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->  
  8.     <title>移动端 Touch 滑动反弹</title>  
  9.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">  
  10.     <style type="text/css">  
  11.       *{margin: 0;padding: 0}  
  12.       html,  
  13.       body{width: 100%;}  
  14.       aside{height: 100%;width: 100%;}  
  15.       /*列表的父盒子，限制高度*/  
  16.       /*注意设置overflow：hidden；样式后，超过这个盒子的ul将不会显示*/  
  17.       .draw{width: 60px;height: 500px;border: 2px solid #ccc;overflow: hidden;position: fixed;left: 10px;top: 50%;transform: translateY(-50%);}  
  18.       /*li设置了浮动，所以ul要清除浮动*/  
  19.       ul:after{content: "";display: block;visibility: hidden;height: 0;clear: both;}  
  20.       ul{zoom:1;}  
  21.       li{list-style: none;float: left;width: 60px;height: 60px;line-height: 60px;text-align: center;}  
  22.     </style>  
  23.   </head>  
  24.   <body>  
  25.     <aside class="main">  
  26.       <div class="draw" id="draw">  
  27.         <ul>  
  28.           <li style="background: orange;">列表一</li>  
  29.           <li style="background:yellowgreen;">列表二</li>  
  30.           <li style="background:yellow;">列表三</li>  
  31.           <li style="background:cyan;">列表四</li>  
  32.           <li style="background:orangered;">列表五</li>  
  33.           <li style="background:pink;">列表六</li>  
  34.           <li style="background:red;">列表七</li>  
  35.           <li style="background:purple;">列表八</li>  
  36.           <li style="background:violet;">列表九</li>  
  37.           <li style="background:brown;">列表十</li>  
  38.         </ul>  
  39.       </div>  
  40.     </aside>  
  41.       
  42.   
  43.     <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> -->  
  44.     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>  
  45.   </body>  
  46.   <script type="text/javascript">  
  47.     var draw = document.querySelector('#draw');  
  48.     var ul = draw.children[0];  
  49.     var startY = 0;   //刚触碰到屏幕时候的手指信息  
  50.     var centerY = 0;  //用来记录每一次触摸时上一次的偏移距离  
  51.     var maxDown = 450;  //设定一个最大向下滑动的距离  
  52.     var maxUp = -(ul.offsetHeight - draw.offsetHeight + maxDown);  //求得一个最大向上滑动的距离  
  53.     var maxDownBounce = -(ul.offsetHeight - draw.offsetHeight);  //向下反弹值  
  54.     var maxUpBounce = 0;  //向上反弹值  
  55.   
  56.     //touchstart时，记录此时手指在Y轴上的落点距离可视顶部距离  
  57.     ul.addEventListener('touchstart',function(e){  
  58.       startY = e.changedTouches[0].clientY;  
  59.     })  
  60.   
  61.     //touchmove时，记录此时手指在Y轴上的落点距离可视顶部距离  
  62.     ul.addEventListener('touchmove',function(e){  
  63.   
  64.       //清除过度  
  65.       ul.style.transition = 'none';  
  66.   
  67.       //获取差值  
  68.       var dy = e.changedTouches[0].clientY - startY;  
  69.   
  70.       //上次的滑动距离加上本次滑动的距离  
  71.       var tempY = centerY + dy;  
  72.   
  73.       //当上次滑动的距离加上本次滑动的距离大于设定的最大向下距离的时候  
  74.       if (tempY > maxDown) {  
  75.         tempY = maxDown;  
  76.       }  
  77.   
  78.       //当上次滑动的距离加上本次滑动的距离小于设定的最大向下距离的时候  
  79.       else if (tempY < maxUp) {  
  80.         tempY = maxUp;  
  81.       }  
  82.   
  83.       //设置ul在Y轴上的偏移  
  84.       ul.style.transform = 'translateY('+ tempY +'px)';  
  85.     })  
  86.   
  87.     //touchend时，记录此时手指在Y轴上的落点距离可视顶部距离  
  88.     ul.addEventListener('touchend',function(e){  
  89.   
  90.       //获取差值  
  91.       var dy = e.changedTouches[0].clientY - startY;  
  92.   
  93.       //记录移动距离  
  94.       centerY = centerY + dy;  
  95.   
  96.       //两次滑动的距离大于设定的向上反弹值  
  97.       if (centerY > maxUpBounce) {  
  98.   
  99.         //让两次滑动滑动的距离等于设置的值  
  100.         centerY = maxUpBounce;  
  101.   
  102.         //添加过度  
  103.         ul.style.transition = 'transform .5s';  
  104.         ul.style.transform = 'translateY('+centerY+'px)';  
  105.       }  
  106.   
  107.       //两次滑动的距离小于设定的向下反弹值  
  108.       else if (centerY < maxUpBounce) {  
  109.   
  110.         //让两次滑动的距离等于设置的值  
  111.         centerY = maxDownBounce;  
  112.         //添加过度  
  113.         ul.style.transition = 'transform .5s';  
  114.         ul.style.transform = 'translateY('+centerY+'px)';  
  115.       }  
  116.     })  
  117.   </script>  
  118. </html> 


效果图如下：

原生js实现移动端Touch滑动反弹  原生js实现移动端Touch滑动反弹    原生js实现移动端Touch滑动反弹

相关推荐