recherche

Maison  >  Article  >  interface Web  >  L'événement tactile HTML5 réalise l'effet de faire glisser la page de haut en bas [avec le code]_compétences du didacticiel HTML5

L'événement tactile HTML5 réalise l'effet de faire glisser la page de haut en bas [avec le code]_compétences du didacticiel HTML5

WBOY
WBOYoriginal
2016-05-16 15:51:392285parcourir

L'événement tactile HTML5 réalise l'effet de faire glisser la page de haut en bas [avec le code]

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >    
  2. <html lang="fr" >    
  3. <tête>    
  4. <meta charset="UTF- 8">    
  5. <méta nom="portée"  content="width=device-width,initial-scale=1 user-scalable=0" />    
  6. titre>     <style>
    7.     
  7. * {marge : 0 ; remplissage : 0;}     #outer{ largeur : 90 % ; hauteur : 490 px ; arrière-plan : #000 ; marge : auto ; débordement : caché ;}    
    8. #inner{width:80%; hauteur : 2 000 px ; arrière-plan : #f67d42 ; marge : auto ; position : relative ; haut : 0 ; }    
  8. style>    
  9. <script src='jquery- 1.9.1.min.js'>script>    
  10. tête>    
  11. <corps>    
  12.   
  13. <div id="spText" >div>    
  14. <div id="extérieur" >    
  15. <div id="intérieur" >    
  16. 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> 5 ans<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 > 5 ans<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>    
  17. div>    
  18. div>    
  19.   
  20. <script>    
  21. var startX,//触摸时的坐标    
  22. startY, 
  23. x, //distance de glissement
  24. oui,
  25. aboveY=0 //Définit une variable globale pour enregistrer la position de la dernière diapositive de bloc interne
  27. var inner=document.getElementById("inner");
    28. fonction touchSatrt(e){//touch
    29. e.preventDefault();
    30. var
  30. touch=e.touches[0]
  31. startY = touch.pageY //Coordonnées lorsqu'on vient de le toucher
    32. }
    34. fonction touchMove(e){//Slide
    35. e.preventDefault();
    36. var
  36. touch = e.touches[0]
  37. y = toucher.pageY - startY;//Distance de glissement
    38. //
  38. inner.style.webkitTransform = 'translate(' 0 'px, ' y 'px )'; //Vous pouvez également utiliser la méthode CSS3
  39. inner.style.top=aboveY y "px" //Dans cette phrase  
    40. }
    42. fonction touchEnd(e){//Le doigt quitte l'écran
    43. e.preventDefault();
  44. aboveY=parseInt(inner.style.top);//Enregistrez le curseur interne après le toucher end La position glissante est reflétée dans la variable globale et doit être convertie en un entier à l'aide de parseInt();
  45. }//
  46. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    47. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
  47. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    49. script
  49. >
    50.  
  50. corps>
    51.  
    52. html
  52. >
  53. L'événement tactile html5 ci-dessus réalise l'effet de glissement de page de haut en bas [avec code] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez Script Home.
    54. Texte original :
  54. http://www.tuicool.com/articles/nIBJju
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Compétences du didacticiel HTML5 sur la normalisation structurée sémantique_html5Article suivant：Compétences du didacticiel HTML5 sur la normalisation structurée sémantique_html5

Articles Liés

Voir plus