Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite

Nutzungsgesten

Beim Entwerfen eines Vollbild-Scrolling-Plug-Ins hoffen wir, dass Entwickler fast:

schnell exquisites H5 generieren können, ohne Skripte schreiben zu müssen

Unterstützt PC-Scrollrad und Mobile Touch

Coole Übergangseffekte

Flexible Zeitleistenverwaltung

Alles ist konfigurierbar

Aber kein Scripting. Sicherlich da gibt es keine Flexibilität? ! NEIN. Hier können Sie nicht nur einige Parameter in HTML konfigurieren, sondern auch Logik über die Rückruffunktion des Plug-Ins einfügen. Nehmen wir den Teil-HTML des Beispiels, das Sie oben gesehen haben, indem wir den Code scannen, um den Nutzungsstatus von AlloyTouch.FullPage zu analysieren:

<div id="fullpage">
    <div>
      <div>
        <div class="animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
        <div class="animated" data-delay="500" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
        <div class="animated" data-delay="1200" data-show="bounceIn" data-hide="bounceOut">By AlloyTeam</div>
      </div>
    </div>
     
    <div>
      <div>
        <div class="animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
        <div class="animated" data-delay="400" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
      </div>
    </div>
    ...
    ...
    ...
 </div>

Beachten Sie, dass das Obige nur ein Teil des HTML ist , und ich habe einiges HTML eingefügt, das für die Plug-in-Konfiguration irrelevant ist, wurde entfernt. Lassen Sie uns sie einzeln analysieren:

class="animated" entspricht der Konvention von animate.css. Das Hinzufügen dieser Klasse bedeutet, dass es eine Animation gibt.

Datenverzögerung gibt an, wie lange das markierte DOM-Element wartet, bevor es nach dem Scrollen zur Seite mit der Wiedergabe der Animation beginnt. Der Standardwert ist 0, wenn der Entwickler ihn nicht markiert.

data-show stellt den Animationstyp dar, der vom markierten DOM-Element angezeigt wird

data-hide stellt den ausgeblendeten Animationstyp des markierten DOM-Elements dar (dies ist normalerweise für Benutzer unsichtbar, aber für die Show-Zeit). Glättung, normalerweise auf den entgegengesetzten Typ zur Datenanzeige eingestellt)

So viel, so viele Konfigurationen, so viele Konfigurationen! ! Ganz einfach! !

Natürlich müssen Sie es in js initialisieren:

new AlloyTouch.FullPage("#fullpage",{
    animationEnd:function () {
     
    },
    leavePage: function (index) {
      console.log("leave"+index)
    },
    beginToPage: function (index) {
      console.log("to"+index);
      pb.to(index / (this.length-1));
    }
  });

animationEnd ist die Rückruffunktion nach dem Ende des Scrollens

leavePage stellt das Verlassen eines dar bestimmte Die Rückruffunktion der Seite

beginToPage stellt die Rückruffunktion zum Aufrufen einer bestimmten Seite dar

Das obige pb wird verwendet, um den Fortschritt der Navigation oder des Fortschritts festzulegen das vorerst. Bei Bedarf können Benutzer jede Fortschrittsbalkenkomponente selbst kapseln.

Prinzipielle Analyse

Hier extrahieren wir hauptsächlich den Kerncode von AlloyTouch.FullPage zur Analyse:

new AlloyTouch({
  touch: this.parent,
  target: this.parent,
  property: "translateY",
  min: (1 - this.length) * this.stepHeight,
  max: 0,
  step: this.stepHeight,
  inertia: false,
  bindSelf : true,
  touchEnd: function (evt, v, index) {
    var step_v = index * this.step * -1;
    var dx = v - step_v;
 
    if (v < this.min) {
      this.to(this.min);
    } else if (v > this.max) {
      this.to(this.max);
    } else if (Math.abs(dx) < 30) {
      this.to(step_v);
    }else if (dx > 0) {
      self.prev();
    } else {
      self.next();
    }
    return false;
  },
  animationEnd: function () {
    option.animationEnd.apply(this,arguments);
    self.moving = false;
  }
});

Der hier berührte und verschobene Dom ist der ganzseitige DOM, d durch window.innerHeight geleitet werden und aus der Gesamtzahl der Seiten berechnet werden, ist this.stepHeight window.innerHeight

max ist offensichtlich 0

step ist offensichtlich window.innerHeight, also this.stepHeight

inertia: False bedeutet, dass die Trägheitsbewegung deaktiviert wird, das heißt, der Benutzer lässt los und scrollt nicht träge.

bindSelf bedeutet, dass touchmove, touchend und touchcancel alle an this.parent selbst gebunden sind, nicht zum Fenster. Wenn bindSelf nicht festgelegt ist, sind touchmove, touchend und touchcancel alle an das Fenster gebunden.

Diese bindSelf-Konfiguration ist beispielsweise sehr nützlich, um das Problem der AlloyTouch-Verschachtelung zu lösen. In dem Beispiel, das Sie beim Scannen des Codes oben gesehen haben, sieht die Demo mit verschachteltem AlloyTouch beispielsweise wie folgt aus:

Dies ist tatsächlich verschachteltes Scrollen. Wird das Rollen der Innenseite dazu führen, dass auch die Außenseite rollt? Wie kann man es lösen? Der darin enthaltene Bildlauf muss bindSelf hinzufügen und Blasenbildung verhindern:

Schauen wir uns den detaillierten Code des internen Bildlaufs an:

In diesem Fall im verschachtelten HTML Verschachteltes AlloyTouch sprudelt nicht, das heißt, das Scrollen nach innen löst kein Scrollen nach außen aus.

var scroller = document.querySelector("#scroller");
Transform(scroller,true);
 
new AlloyTouch({
  touch:"#demo0",
  target: scroller,
  property: "translateY",
  min:250-2000,
  max: 0 ,
  touchStart:function(evt){
    evt.stopPropagation();
  },
  touchMove:function(evt){
    evt.stopPropagation();
  },
  bindSelf:true
})

Weitere Analyse des FullPage-Quellcodes:

touchEnd ist die Rückruffunktion, nachdem der Finger des Benutzers den Bildschirm verlässt. Es enthält eine Grenzverarbeitungslogik:

Das Überschreiten von Min. und Max. führt zu entsprechenden Korrekturen von Min. und Max.

Schrittkorrektur, wenn der Absolutwert kleiner als 30 Pixel ist, wird er zurückgesetzt.

Schrittkorrektur, wenn der Absolutwert größer als 30 Pixel und größer als 0 ist, wird er zurückgesetzt vorherige Seite.

Schrittkorrektur, wenn der absolute Wert größer als 30 Pixel ist und wenn er kleiner als 0 ist, wird zur nächsten Seite gewechselt

False zurückgeben bedeutet, dass die Bewegungskorrekturlogik Nach dem Loslassen von AlloyTouch wird Ihre Hand nicht ausgeführt.

animationEnd ist der Rückruf, nachdem die Bewegung beendet ist. Die Funktion führt das vom Benutzer von AlloyTouch.FullPage übergebene und festgelegte aus Wechsel zu false.

Beginnen Sie die Reise von AlloyTouch.FullPage

Github: https://github.com/AlloyTeam/AlloyTouch

Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, dass es für alle hilfreich sein wird. Das Lernen ist hilfreich und ich hoffe, dass jeder die chinesische PHP-Website unterstützen wird.

Für weitere AlloyTouch-Vollbild-Bildlauf-Plug-Ins können Sie in 30 Sekunden eine reibungslose H5-Seite erstellen. Weitere Artikel finden Sie auf der chinesischen PHP-Website!