Home > Article > Web Front-end > html5 touch event realizes sliding up and down of touch screen page (1)

html5 touch event realizes sliding up and down of touch screen page (1)

不言Original: 2018-06-05 14:43:583474browse

This article mainly introduces in detail the code related to the html5 touch event to realize the sliding up and down of the touch screen page. The code comments are very clear. Interested friends can refer to what

has done recently. The app project caused many problems due to the use of overflow:hidden, so I decided to study the touch event of html5. It is difficult to find a comprehensive post. Although there are many articles about html5 touch, most of them introduce touch events or very short demos.
A relatively comprehensive small demo of sliding up and down, the code is relatively simple.

The following is the complete code. I have marked several important places in red

XML/HTML CodeCopy the content to the clipboard

<!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=&#39;jquery-1.9.1.min.js&#39;></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 = &#39;translate(&#39; + 0+ &#39;px, &#39; + y + &#39;px)&#39;;  //也可以用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(&#39;touchstart&#39;, touchSatrt,false);     
             document.getElementById("outer").addEventListener(&#39;touchmove&#39;, touchMove,false);     
             document.getElementById("outer").addEventListener(&#39;touchend&#39;, touchEnd,false);     
    </script>  
</body>  
  
</html>

The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

About HTML5 to implement image compression upload function

The above is the detailed content of html5 touch event realizes sliding up and down of touch screen page (1). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：javascript html5 canvas implements draggable province map of ChinaNext article：javascript html5 canvas implements draggable province map of China

See more

html5 touch event realizes sliding up and down of touch screen page (1)

Related articles