L'événement tactile HTML5 réalise le glissement de haut en bas de la page de l'écran tactile-Tutoriel H5-php.cn

L'événement tactile HTML5 réalise le glissement de haut en bas de la page de l'écran tactile

不言

Libérer： 2018-06-25 17:46:58

original

3446 Les gens l'ont consulté

Cet article présente principalement en détail le code lié à l'événement tactile html5 pour réaliser le glissement de haut en bas de la page de l'écran tactile. Les commentaires de code sont très clairs. Les amis intéressés peuvent se référer à ce que

a. fait récemment. Le projet d'application a causé de nombreux problèmes en raison de l'utilisation de overflow:hidden, j'ai donc décidé d'étudier l'événement tactile de html5. Il est difficile de trouver un article complet. Bien qu'il existe de nombreux articles sur HTML5 Touch, la plupart d'entre eux présentent des événements tactiles ou de très courtes démos.
Une petite démo relativement complète de glissement de haut en bas, le code est relativement simple.

Ce qui suit est le code complet. J'ai marqué plusieurs endroits importants en rouge

<!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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. être utile à l'apprentissage de chacun. Pour obtenir de l'aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

HTML5 et CSS pour interdire la fonction copier-coller à appui long sur IOS

HTML5 et jQuery pour réaliser créativité pop-up Méthode de couche de zone de recherche

html5 et css3 et jquery pour implémenter un lecteur de musique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!