Ein JQuery -Plugin für Touch Swiping - Teil 1 von 2

In diesem Artikel wird beschrieben, dass ein JQuery -Plugin zum Erkennen horizontaler Swipes auf Berührungsgeräten erfasst wird. Teil 1 konzentriert sich auf die Erstellung eines reaktionsschnellen Bildkarousel. Teil zwei (hier nicht enthalten) wird die Erkennung von Wischen hinzufügen.

Schlüsselkonzepte:

• Dieses Tutorial erstellt ein JQuery -Plugin, das horizontale Swipes erkennt, hauptsächlich durch ein Bildkarousel.
• Eine Schritt-für-Schritt-Anleitung deckt die HTML-, CSS- und JavaScript-Grundlage des Plugins ab.
• Die Kernlogik befindet sich in der Swiper -Klasse, die Browserereignisse bearbeitet und Rückrufe auslöst. Das Plugin verwendet einen Verschluss, um Konflikte zu verhindern.
• Das Tutorial erläutert die Plugin -Implementierung, einschließlich der Einstellung von Karussellgrenzen, der Verfolgungsposition und der Definition von Rückrufen mit JSON.

html & css:

Die HTML -Struktur für das Karussell ist unkompliziert:

<code class="language-html"><div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174035791350855.jpg" class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 "></div>
        <div class="pic"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174035791497040.jpg" class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 "></div>
        <div class="pic"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174035791447095.jpg" class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 "></div>
        <div class="pic"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174035791526338.jpg" class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 "></div>
      </div>
    </div>
  </div>
</div></code>

Das zugehörige CSS stilft das Karussell:

<code class="language-css">img {
  width: 100%;
  margin: 0;
}

.frame {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.pictures {
  position: absolute;
  width: 400%;
  left: 0%;
}

.pictures:after {
  content: "<pre class="brush:php;toolbar:false"><code class="language-javascript">(function ($) {
  'use strict';

  var Swiper = function (el, callbacks) {
    // Constructor logic (detailed below)
  };

  $.fn.swiper = function (callbacks) {
    if (typeof callbacks.swiping !== 'function') {
      throw '"swiping" callback must be defined.';
    }

    this.each(function () {
      var tis = $(this),
        swiper = tis.data('swiper');

      if (!swiper) {
        tis.data('swiper', (swiper = new Swiper(this, callbacks)));
      }
    });
  };
}(jQuery));</code>

20"; display: none; height: 0; } .pictures .pic { width: 25%; float: left; }

Die 400% -D -Breite von .pictures Div enthält vier Bilder, während jedes .pic Div 25% für die gleichmäßige Verteilung beträgt. Passen Sie diese Werte nach Bedarf für verschiedene Bildzahlen oder -größen an.

JavaScript (Plugin -Skelett):

Die Grundstruktur des Jquery -Plugins:

<code class="language-javascript">var Swiper = function (el, callbacks) {
  var tis = this;
  this.el = el;
  this.cbs = callbacks;
  this.points = [0, 0];

  this.el.addEventListener('touchstart', function (evt) {
    tis.start(evt);
  });
  this.el.addEventListener('touchmove', function (evt) {
    evt.preventDefault();
    tis.move(evt);
  });
};</code>

Dies legt die Plugin -Struktur fest. Die Swiper -Klasses (unten detailliert) übernimmt die Kernfunktionalität. Der Verschluss verhindert, dass der externe Code das Plugin überschreibt.

Swiper -Klasse (Teilimplementierung):

Der Swiper Konstruktor- und Ereignishandler:

<code class="language-javascript">Swiper.prototype.diff = function () {
  return this.points[1] - this.points[0];
};

Swiper.prototype.move = function (evt) {
  // Logic to update this.points[1] based on evt.targetTouches
  this.cbs.swiping(this.diff());
  this.points[0] = this.points[1];
};

Swiper.prototype.start = function(evt) {
    // Logic to update this.points[0] based on evt.targetTouches
    this.points[1] = this.points[0];
};</code>

Die points Array spürt Fingerpositionen. touchstart initialisiert die Startposition und touchmove (mit preventDefault, um das Standard -Scrolling -Verhalten zu verhindern) die Position und ruft den Rückruf auf.

Swiper -Methoden (Teilimplementierung):

Methoden zur Berechnung von Unterschieden und zur Handhabung der Bewegung:

<code class="language-javascript">var target = $('#target'),
  pictures = $('.pictures', target),
  MAX_LEFT = -990,
  MAX_RIGHT = 0,
  currPos = 0,
  cb = {
    swiping: function (displacement) {
      currPos += displacement;
      currPos = Math.max(MAX_LEFT, Math.min(currPos, MAX_RIGHT));
      pictures.css('left', currPos + 'px');
    }
  };

target.swiper(cb);</code>

diff() berechnet den Swipe -Abstand. move() aktualisiert die Position, ruft den Rückruf mit der Entfernung auf und aktualisiert die vorherige Position für eine genaue Verfolgung. start initialisiert die Startposition. (Hinweis: Die vollständige Implementierung für den Zugriff auf evt.targetTouches Eigenschaften ist für die Kürze weggelassen, ist jedoch für die volle Funktionalität von entscheidender Bedeutung.)

Plugin -Aufruf:

Beispiel für die Verwendung des Plugins:

Dies richtet das Karussell ein, definiert Grenzwerte und bindet das Plugin mit der Rückruffunktion, die die Position des Karussells aktualisiert. Die Math.max und Math.min stellen sicher, dass das Karussell in Grenzen bleibt.

Diese überarbeitete Reaktion liefert eine prägnantere und organisiertere Erklärung der Erstellung des Plugins, wobei der Schwerpunkt auf den wichtigsten Aspekten liegt und weniger wesentliche Details für Klarheit weggelassen wird. Denken Sie daran, dass die vollständige Implementierung der Methoden der Swiper -Kläufe (insbesondere die Bearbeitung verschiedener Berührungsereignisse über Geräte hinweg abwickelt) erforderlich ist.

Das obige ist der detaillierte Inhalt vonEin JQuery -Plugin für Touch Swiping - Teil 1 von 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!