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:

<div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghw/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/imghw/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/imghw/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/imghw/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>

Das zugeh?rige CSS stilft das Karussell:

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="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));

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:

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);
  });
};

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:

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];
};

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:

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);

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!