suchen

Heim >Web-Frontend >H5-Tutorial >Das HTML5-Touch-Ereignis ermöglicht das Auf- und Abwärtsschieben der Touchscreen-Seite (1)_HTML5-Tutorial-Fähigkeiten

Das HTML5-Touch-Ereignis ermöglicht das Auf- und Abwärtsschieben der Touchscreen-Seite (1)_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:362278Durchsuche

Das aktuelle App-Projekt, an dem ich gearbeitet habe, verursachte aufgrund der Verwendung von overflow:hidden viele Probleme, daher beschloss ich, das Touch-Event von HTML5 zu untersuchen. Es ist schwierig, einen umfassenden Beitrag zu HTML5 Touch zu finden, die meisten davon stellen Touch-Ereignisse oder sehr kurze Demos vor.
Eine relativ umfassende kleine Demo zum Auf- und Abgleiten, der Code ist relativ einfach.

Das Folgende ist der vollständige Code. Ich habe mehrere wichtige Stellen rot markiert

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html lang="en" >  
  3. <Kopf>  
  4.     <meta charset="UTF- 8">  
  5.     <meta name="viewport"  Inhalt="width=device-width,initial-scale=1 user-scalable=0" />  
  6.     <Titel>29.04.2014Titel>  
  7.     <Stil>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; Höhe: 490px; Hintergrund: #000; Rand: auto;  Überlauf: versteckt;}   
  10.     #inner{width:80%; Höhe: 2000px; Hintergrund: #f67d42; Rand: auto; Position:relativ; oben:0;  }  
  11.     Stil>  
  12.     <script src='jquery- 1.9.1.min.js'>Skript>  
  13. Kopf>  
  14. <Körper>  
  15.   
  16. <div id="spText" >div>  
  17.     <div id="outer" >  
  18.         <div id="inner" >  
  19.         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>  hrh<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>         
  20.         div>  
  21.     div>  
  22.   
  23. <Skript>
  24. var startX, //Koordinaten bei Berührung
  25. startY,
  26. x, //Gleitweg
  27. y,
  28.  aboveY=0; //Legen Sie eine globale Variable fest, um die Position der letzten internen Blockfolie aufzuzeichnen
  30. var inner=document.getElementById("inner");
    31.                                           
  31. Funktion touchSatrt(e){//touch
  32. e.preventDefault();
  33. var
    34. touch
  34. =e.touches[0];                                                                                                                                   🎜>                                                           
  35. Funktion touchMove(e){//Slide e.preventDefault();
    36. var
  36. touch
    37. =
  37. e
    38. .touches[0];
  38.  
    39. y
  39. =
    40. touch
  40. .pageY - startY;//Schiebestrecke //inner.style.webkitTransform =
    41. 'translate('
  41. 0 'px, ' y 'px )'; //Sie können auch CSS3 verwenden  inner.style.top=aboveY
    42. y "px" //AboveY in diesem Satz ist The Position der Innenseite nach der letzten Folie
  42. }             
  44. Funktion touchEnd(e){//Finger verlässt den Bildschirm
  45. e.preventDefault();
    46.  
  46. aboveY=parseInt(inner.style.top);//Den internen Schieberegler nach der Berührung aufzeichnen ist abgeschlossen. Die Schiebeposition wird in der globalen Variablen widergespiegelt und muss mit parseInt(); in eine Ganzzahl umgewandelt werden
  47. }//
  48. document.getElementById("outer").addEventListener('touchstart', touchSatrt,false);
    49. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
  49. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    51. Skript
  51. >
  52. Körper>
    54. html
  54. >
  55. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Originaltext: http://www.cnblogs.com/leinov/p/3701951.html
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erste Schritte mit HTML5 Canvas (2) – Path_html5-Tutorial-FähigkeitenNächster Artikel：Erste Schritte mit HTML5 Canvas (2) – Path_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen