欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-12-15 12:44:52
这篇文章主要为大家详细介绍了html5 touch事件实现触屏页面上下滑动的相关代码，代码注释很清楚，感兴趣的小伙伴们可以参考一下... 16-03-10...

最近做的做那个app的项目由于用overflow：hidden导致了很多问题，于是决定研究下html5的touch事件。想找个全面点的帖子很难，虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
比较全面的上下滑动的小demo，代码比较简单。

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

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>  
  6.     <title>2014-4-29</title>  
  7.     <style>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; height: 490px; background: #000; margin: auto;  overflow: hidden;}   
  10.     #inner{width:80%; height: 2000px; background: #f67d42; margin: auto; position:relative; top:0;  }   
  11.     </style>  
  12.     <script src='jquery-1.9.1.min.js'></script>  
  13. </head>  
  14. <body>  
  15.   
  16. <div id="sptext"></div>  
  17.     <div id="outer">  
  18.         <div id="inner">  
  19.         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>         
  20.         </div>  
  21.     </div>  
  22.   
  23.     <script>  
  24.         var startx,//触摸时的坐标   
  25.             starty,   
  26.              x, //滑动的距离   
  27.              y,   
  28.              abovey=0; //设一个全局变量记录上一次内部块滑动的位置    
  29.   
  30.          var inner=document.getelementbyid("inner");   
  31.             
  32.             function touchsatrt(e){//触摸   
  33.                 e.preventdefault();   
  34.                 var touch=e.touches[0];   
  35.                 starty = touch.pagey;   //刚触摸时的坐标                 
  36.             }   
  37.   
  38.             function touchmove(e){//滑动             
  39.                  e.preventdefault();           
  40.                  var  touch = e.touches[0];                  
  41.                  y = touch.pagey - starty;//滑动的距离   
  42.                 //inner.style.webkittransform = 'translate(' + 0+ 'px, ' + y + 'px)';  //也可以用css3的方式        
  43.                 inner.style.top=abovey+y+"px"; //这一句中的abovey是inner上次滑动后的位置                      
  44.             }     
  45.   
  46.             function touchend(e){//手指离开屏幕   
  47.               e.preventdefault();                      
  48.               abovey=parseint(inner.style.top);//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseint()将其转化为整数字;   
  49.   
  50.             }//   
  51.              document.getelementbyid("outer").addeventlistener('touchstart', touchsatrt,false);     
  52.              document.getelementbyid("outer").addeventlistener('touchmove', touchmove,false);     
  53.              document.getelementbyid("outer").addeventlistener('touchend', touchend,false);     
  54.     </script>  
  55. </body>  
  56.   
  57. </html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：

上一篇：

下一篇：

推荐阅读