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

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

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

XML/HTML Code复制内容到剪贴板

!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">
              123br>
            123br>
        gagbr>
     afbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     yryyrbr>
     ryrybr>
     123br>
     123br>
     123br>
     123br>
     123br>
     sDFfbr>
     fefbr>
     123br>
     hrbr>
     hrhbr>
     5ybr>
     123br>
     erbr>
     ertbr>
     123br>
     rgdgdgbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     gfgfgfgfgfgfbr>
     sdsdsdsdsdsdbr>
     sfbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     gdggdgdgbr>
     123br>
     drgdrgdbr>
     123br>
     123br>
     123br>
     yuyuyuyuyuybr>
     hjkhjkhkhkhjkhkhbr>
     kjkjkbr>
    123br>
          123br>
        gagbr>
     afbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     yryyrbr>
     ryrybr>
     123br>
     123br>
     123br>
     123br>
     123br>
     sdffbr>
     fefbr>
     123br>
     hrbr>
     hrhbr>
     5ybr>
     123br>
     erbr>
     ertbr>
     123br>
     rgdgdgbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     gfgfgfgfgfgfbr>
     sdsdsdsdsdsdbr>
     sfbr>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     123br>
     gdggdgdgbr>
     123br>
     drgdrgdbr>
     123br>
     123br>
     123br>
     yuyuyuyuyuybr>
     hjkhjkhkhkhjkhkhbr>
     kjkjkbr>
                     /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>
    

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

相关推荐：

关于HTML5实现图片压缩上传功能

以上就是html5 touch事件实现触屏页面上下滑动(一)的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！