suchen

Heim >Web-Frontend >H5-Tutorial >Das HTML5-Touch-Ereignis ermöglicht das Hoch- und Herunterschieben der Touchscreen-Seite (2)_HTML5-Tutorial-Fähigkeiten

Das HTML5-Touch-Ereignis ermöglicht das Hoch- und Herunterschieben der Touchscreen-Seite (2)_HTML5-Tutorial-Fähigkeiten

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

Im vorherigen Artikel wurde das HTML5-Touch-Ereignis verwendet, um einen einfachen Gleiteffekt zu erzeugen und den Effekt eines kontinuierlichen Auf- und Abgleitens der Seite zu erzielen. Lesen Sie den vorherigen Artikel und codieren Sie das HTML5-Touch-Ereignis, um das Auf- und Abgleiten des Touchscreens zu realisieren Seite (1)

Dieser Artikel erzielt hauptsächlich einen Effekt: Wenn die Seite nach oben oder unten rutscht, wird verhindert, dass sie weiter rutscht

Da das Touch-Ereignis zur Seite hinzugefügt wird, werden die ursprünglichen Standardattribute anderer Seiten wie Bildlaufleisten nicht geändert. Die Demo im vorherigen Artikel kann ständig nach oben oder unten verschoben werden, aber die Realität ist, dass dies der Fall ist ist nicht ratsam

Vollständiger Code:

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>2014-5-4Titel>  
  7.     <Stil>  
  8.     * {margin: 0;  padding: 0;}   
  9.     #outer{ width:90%; Höhe: 490px; Hintergrund: #000; Rand: auto;  Überlauf: versteckt;}   
  10.     #inner{width:80%;  Hintergrund: #e4e4e4; Rand: auto; Position:relativ; oben:0px; Schriftgröße: 1em; Polsterung: 30px 10px;  }   
  11.     #inner p{line-height: 30px; Buchstabenabstand: 3px; text-indent:2em;}   
  12.     #spText{ height: 40px; width: 100 %;border:1px solid red;}   
  13.     h2{ width: 100 %; text-align: center; }   
  14.     h3{ width: 100 %; padding-left:60%;}  
  15.     Stil>  
  16.     <script src='http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'>script>  
  17. Kopf>  
  18. <Körper>  
  19.   
  20. <div id="spText" >div>  
  21. <div id="spText2" >div>  
  22.     <div id="outer" >  
  23.         <div id="inner" >  
  24.             <h2>背影h2>  
  25.             <h3>—朱自清h3>  
  26.                        我最不能忘记的是他的背影.[1-2]            那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子.我从北京到徐州,打算跟着父亲奔丧回家.到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪.父亲说:“事已如此,不必难过,好在天无绝人之路！“[1 -2]            回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡一半为了丧事,一半为了父亲赋闲.丧事完毕,父亲要到南京谋事，我也要回北京念书，我们便同行。[1-2]   
  27.     #北去.父亲因为事忙,本已说定不送我叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会.其实我那年已二十岁，北京已来往过两三次,是没有什么要紧的了.他踌躇了一会,终于决定还是自己送我去.Ich habe ihm wiederholt geraten, nicht zu gehen; er sagte nur: „Das macht nichts, es ist nicht gut für sie zu gehen!“
    28. Wir überquerten den Fluss und betraten den Bahnhof. Ich kaufte das Ticket und er war damit beschäftigt, sich um das Gepäck zu kümmern. Da es zu viel Gepäck gab, musste ich dem Gepäckträger ein Trinkgeld geben, um durchzukommen. Er war damit beschäftigt, erneut mit ihnen über den Preis zu verhandeln. Ich war damals wirklich zu schlau und hatte immer das Gefühl, dass das, was er sagte, nicht sehr nett war und ich mich unterbrechen musste. Aber schließlich stimmte er dem Preis zu und schickte mich zum Auto. Er wählte für mich einen Stuhl neben der Autotür; ich breitete den lila Pelzmantel, den er für mich angefertigt hatte, auf dem Sitz aus. Er sagte mir, ich solle auf der Straße vorsichtig sein und nachts wachsam sein, um mich nicht zu erkälten. Ich habe auch den Kellner gebeten, gut auf mich aufzupassen. Ich habe insgeheim über seine Pedanterie gelacht; sie erkannten nur Geld, und ihnen zu vertrauen war nur kostenloses Geld! Und kann ich für jemanden, der so alt ist wie ich, nicht immer noch auf mich selbst aufpassen? [1-2]
    29. Ich sagte: „Papa, lass uns gehen.“ Er schaute aus dem Auto und sagte: „Ich werde ein paar Orangen kaufen. Du bleibst hier, beweg dich nicht umher.“ Dort drüben warten mehrere Verkäufer vor dem Zaun auf Kunden. Wenn Sie dort am Bahnsteig ankommen, müssen Sie die Bahnlinie überqueren, hinunterspringen und wieder hinaufsteigen. Mein Vater ist ein dicker Mann, daher wäre es schwieriger, dorthin zu gehen. Ich wollte gehen, aber er weigerte sich, also musste ich ihn gehen lassen. Ich sah ihn eine schwarze Stoffmütze, eine große schwarze Stoffjacke und einen dunkelblauen Stoffmantel tragen. Er taumelte zur Seite der Eisenbahn und beugte sich langsam nach unten. Doch es fiel ihm nicht leicht, die Bahn zu überqueren und auf den Bahnsteig dort drüben zu klettern. Er klammerte sich mit beiden Händen daran fest und zog seine Füße nach oben; sein dicker Körper neigte sich leicht nach links und zeigte Anstrengung. Zu diesem Zeitpunkt sah ich seinen Rücken und meine Tränen flossen schnell. Ich wischte schnell meine Tränen weg. Angst, dass er es sehen würde, und auch Angst, dass andere es sehen würden. Als ich wieder nach draußen schaute, hatte er die scharlachrote Orange bereits umarmt und ging zurück. Als er die Bahn überquerte, verstreute er zunächst die Orangen auf dem Boden, kletterte langsam hinunter, hob dann die Orangen auf und ging davon. Als ich hier ankam, ging ich schnell los, um ihm zu helfen. Er ging mit mir zum Auto und legte Orangen auf meinen Pelzmantel. Also wischte er den Schmutz von seiner Kleidung weg und fühlte sich sehr entspannt. Nach einer Weile sagte er: „Ich gehe. Ich schreibe dir da drüben einen Brief!“ Ich sah ihm nach. Er ging ein paar Schritte, drehte sich um, sah mich und sagte: „Geh rein, da ist niemand drin.“ Als sein Rücken mit dem Kommen und Gehen der Leute verschwand und er nicht mehr zu finden war, kam ich rein und Ich setzte mich und meine Tränen kamen wieder. [1-2]
    30. In den letzten Jahren sind mein Vater und ich herumgelaufen und die Situation zu Hause hat sich von Tag zu Tag verschlechtert. Als junger Mann ging er hinaus, um seinen Lebensunterhalt zu bestreiten, verdiente seinen Lebensunterhalt selbst und vollbrachte viele großartige Dinge. Wer hätte gedacht, dass Laojing so dekadent ist! Er war so traurig, dass er nicht anders konnte. Wenn er in seinem Herzen deprimiert ist, wird er dies natürlich nach außen hin zum Ausdruck bringen; triviale Dinge in seiner Familie machen ihn oft wütend. Er behandelte mich nach und nach anders als zuvor. Aber nachdem er sich die letzten zwei Jahre nicht gesehen hatte, vergaß er schließlich meine Fehler und dachte nur noch an mich und meinen Sohn. [1-2]
    31. Nachdem ich in den Norden gekommen war, schrieb er mir einen Brief, in dem er schrieb: „Mir geht es gut, aber mein Arm tut furchtbar weh und ich habe große Schwierigkeiten, Stäbchen und Stifte zu heben.“ . Ich glaube, mein Tod ist nicht mehr weit. „Als ich das las, sah ich in den glitzernden Tränen wieder die dicke Gestalt in der grünen Baumwollrobe und der schwarzen Stoffmandarine.Also! Ich weiß nicht, wann ich ihn wiedersehen werde!p>
  31. div>
  32.  div> 
  34. <Skript>
  35. var startX, //Koordinaten bei Berührung
  36. startY,
  37. x, //Gleitweg
  38. y,
  39.  aboveY=0; // Setzen Sie eine globale Variable, um die Position der letzten internen Blockfolie aufzuzeichnen
  40. var documentHeight=$("#inner").height();//Die Höhe des internen Schiebemoduls
  41. var wapperHeight=$("#outer").height(); //Höhe des äußeren Rahmens
  42.                                                        
    44. var
  44. inner=document.getElementById("inner");
  45. Funktion touchStart(e){//Touch start
  46. e.preventDefault();
  47. var
    48. touch
  48. =e.touches[0];                                                                                                   🎜> }
  50. Funktion touchMove(e){//Slide
  51. e.preventDefault();
  52. var touch = e.touches[0];
    53.                                                                                                                                                                                    
  53.                                                                                                                       document.getElementById("spText").innerHTML=inner.style.top;                                                         
    54.                                                                
  54.                                                     Funktion touchEnd(e){//Der Finger verlässt den Bildschirm                                                                                                              Die Schiebeposition wird in der globalen Variablen widergespiegelt und muss mit parseInt(); in eine Ganzzahl umgewandelt werden
    55. if(y
  55. >0&>
    56. 0){//Kann nicht verwendet werden, wenn zum verschoben wird oben Swipe online
    57. //
  57. inner.style.top
    58. =
  58. 0
    59. ;
    60. $("#inner").animate({top:0},200);
  60.  
    61. obenY
  61. =0;                                                
  62.                                                     
    63. si(y
  63. <0&&(ci-dessusY<(-( documentHeight-wapperHeight)))){//Lorsqu'il glisse vers le bas, il ne peut pas être glissé hors ligne
    64.                                                                                                                                                                                                                                                                               
  64. $("#inner").animate({top:-(documentHeight-wapperHeight)},200 );  
    65. ci-dessusY
  65. =-(documentHeight-wapperHeight); 
  66.                                                                      }//
    67. document.getElementById("outer").addEventListener('touchstart', touchStart,false);
  67. document.getElementById("outer").addEventListener('touchmove', touchMove,false);
    68. document.getElementById("outer").addEventListener('touchend', touchEnd,false);
    69. script>
    71. corps>
  71. html>
  73. Ce qui précède est le code complet de la démo Cette fois, j'ai utilisé jquery car animer est utilisé pour rendre le glissement vers le haut et le bas un peu flexible Ce qui suit est l'effet de démonstration. Vous pouvez également copier le code et y accéder sur votre téléphone mobile. Le code est relativement simple et n'obtient l'effet que sans tenir compte de la compatibilité et de la robustesse . Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Texte original : http://www.cnblogs.com/leinov/p/3707197.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 (1) – Grundlegende Konzepte_HTML5-Tutorial-FähigkeitenNächster Artikel：Erste Schritte mit HTML5 Canvas (1) – Grundlegende Konzepte_HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen