html5 touch事件实现触屏页面上下滑动

互联网 18-6-25

这篇文章主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码，代码注释很清楚，感兴趣的小伙伴们可以参考一下

下面是完整代码，我把几个重要的地方做了红色标记

<!doctype html>   <html lang="en">   <head>       <meta charset="UTF-8">       <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>       <title>2014-4-29</title>       <style>       * {margin: 0;  padding: 0;}        #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}        #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }        </style>       <script src='jquery-1.9.1.min.js'></script>   </head>   <body>      <p id="spText"></p>       <p id="outer">           <p id="inner">           123<br>        123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>123<br>      123<br>    gag<br> af<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> yryyr<br> ryry<br> 123<br> 123<br> 123<br> 123<br> 123<br> sdff<br> fef<br> 123<br> hr<br> hrh<br> 5y<br> 123<br> er<br> ert<br> 123<br> rgdgdg<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gfgfgfgfgfgf<br> sdsdsdsdsdsd<br> sf<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> 123<br> gdggdgdg<br> 123<br> drgdrgd<br> 123<br> 123<br> 123<br> yuyuyuyuyuy<br> hjkhjkhkhkhjkhkh<br> kjkjk<br>                  </p>       </p>          <script>           var startX,//触摸时的坐标                startY,                 x, //滑动的距离                 y,                 aboveY=0; //设一个全局变量记录上一次内部块滑动的位置                 var inner=document.getElementById("inner");                             function touchSatrt(e){//触摸                    e.preventDefault();                    var touch=e.touches[0];                    startY = touch.pageY;   //刚触摸时的坐标                              }                   function touchMove(e){//滑动                               e.preventDefault();                             var  touch = e.touches[0];                                    y = touch.pageY - startY;//滑动的距离                    //inner.style.webkitTransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式                         inner.style.top=aboveY+y+"px"; //这一句中的aboveY是inner上次滑动后的位置                                   }                     function touchEnd(e){//手指离开屏幕                  e.preventDefault();                                     aboveY=parseInt(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;                   }//                 document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);                   document.getElementById("outer").addEventListener('touchmove', touchMove,false);                   document.getElementById("outer").addEventListener('touchend', touchEnd,false);          </script>   </body>      </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

html5 touch事件实现触屏页面上下滑动

相关资讯

标签推荐