Maison > interface Web > Tutoriel H5 > 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
Libérer: 2016-05-16 15:51:39
original
2297 Les gens l'ont consulté

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.     
  8. * {marge : 0 ; remplissage : 0;}     #outer{ largeur : 90 % ; hauteur : 490 px ; arrière-plan : #000 ; marge : auto ; débordement : caché ;}    
  9. #inner{width:80%; hauteur : 2 000 px ; arrière-plan : #f67d42 ; marge : auto ; position : relative ; haut : 0 ; }    
  10. style>    
  11. <script src='jquery- 1.9.1.min.js'>script>    
  12. tête>    
  13. <corps>    
  14.   
  15. <div id="spText" >div>    
  16. <div id="extérieur" >    
  17. <div id="intérieur" >    
  18. 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>    
  19. div>    
  20. div>    
  21.   
  22. <script>    
  23. var startX,//触摸时的坐标    
  24. startY, 
  25. x, //distance de glissement
  26. oui,
  27. aboveY=0 //Définit une variable globale pour enregistrer la position de la dernière diapositive de bloc interne
  28. var inner=document.getElementById("inner");
  29. fonction touchSatrt(e){//touch
  30. e.preventDefault();
  31. var
  32. touch=e.touches[0]
  33. startY = touch.pageY //Coordonnées lorsqu'on vient de le toucher
  34. }
  35. fonction touchMove(e){//Slide
  36. e.preventDefault();
  37. var
  38. touch = e.touches[0]
  39. y = toucher.pageY - startY;//Distance de glissement
  40. //
  41. inner.style.webkitTransform = 'translate(' 0 'px, ' y 'px )'; //Vous pouvez également utiliser la méthode CSS3
  42. inner.style.top=aboveY y "px" //Dans cette phrase  
  43. }
  44. fonction touchEnd(e){//Le doigt quitte l'écran
  45. e.preventDefault();
  46. 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();
  47. }//
  48. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
  49. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
  50. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
  51. script
  52. >
  53.  
  54. corps>
  55.  
  56. html
  57. >
  58. 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.
  59. Texte original :
  60. http://www.tuicool.com/articles/nIBJju
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal