Kernpunkte

• Dieses Tutorial führt Sie zum Erstellen eines Cross-Browser-kompatiblen JQuery-Plugins, das blinkende Texteffekte erzielt und den Website-Stil und die Reiz für den Website verbessert. Das Plug-In berücksichtigt auch Probleme mit Barrierefreiheit und bietet stop() Methodenstoppeffekt.
• Das Plugin wird als "Au?ero -Blitztext" bezeichnet und entsprechend den Best Practices von Jquery Plugin entwickelt. Es enth?lt Standardeinstellungen, Initialisierung, Start, Stopp und isRunning Methoden. Diese Methoden steuern den zu angezeigten Text, verblassen, Dauer, verblassen die Zeit und die Reihenfolge, in der die Textauswahl ausgew?hlt wird.
Die
• start() -Methode ist der kritischste Teil des Plugins, da es den Effekt ausführt. Es umfasst das Erstellen eines Elements, das in einem bestimmten Bereich schwebt, die fadeOut() -Funktion entfernt das erstellte Element aus dem DOM und führt dann den Effekt anhand der aktuellen Konfiguration mit der n?chsten, vorherigen oder zuf?lligen Zeichenfolge erneut aus.
• Tutorial endet mit Beispielen für die Verwendung von Plugins und das Anpassen von Einstellungen wie Zeit- und Textauswahlreihenfolge. Das Plugin "Au?ero-Blitztext" ist kostenlos und kann unter der Dual-Lizenz von MIT und GPL-3.0 ge?ndert oder verbessert werden.

Manchmal ben?tigen Sie einige coole Effekte, um das Erscheinungsbild Ihrer Website zu verbessern und die Aufmerksamkeit Ihrer Besucher auf sich zu ziehen. Auf dem Markt stehen viele kostenlose und sofortige Plugins zur Verfügung, um den Stil Ihrer Website zu verbessern. In diesem Tutorial werden Sie ein Cross-Browser-JQuery-Plugin entwickelt, das zuf?llig platzierte, zuf?llig in einem bestimmten Bereich blinkende Texte erstellt. Es wird auch Barrierefreiheitsprobleme berücksichtigen (schlie?lich sprechen wir über Blincing -Text) und liefert eine stop() -Methode, um den Effekt zu stoppen. Dieses Plugin erm?glicht mehrere Animationen auf derselben Seite, und jede Animation ist v?llig unabh?ngig von anderen Animationen. Das Endergebnis ist eine JavaScript -Datei, die Sie problemlos in Ihre Seite aufnehmen k?nnen. Um dieses Plugin zu erstellen, folge ich den Richtlinien, die vom Jquery -Plugin vorgeschlagen wurden, damit es mit Best Practices von JQuery Plugin entwickelt wird. Ich habe dieses Thema bereits in meinem Beitrag "Implementieren eines Cross-Browser-Kontextmenüs als JQuery-Plugin" beschrieben. Beachten Sie auch, dass ich von nun an das Plugin als "Audero Blinking -Text" bezeichne.

starten

Jetzt, da ich Ihnen den Ausgangspunkt von ?Au?ero -Blitztext“ gezeigt habe, müssen Sie die Methoden verstehen, die sie enthalten. Es ist nicht schwer vorstellbar, dass Sie eine Methode ben?tigen, um das Plugin zu initialisieren, und eine Methode, um den Effekt zu starten. Die Initialisierungsfunktion nutzt einige Standardwerte, die verwendet werden, wenn keine spezifischen Werte festgelegt werden. Wie im vorherigen Abschnitt erw?hnt, ist die M?glichkeit, Benutzern einen Stoppeffekt zu erzielen, gut. Zu guter Letzt kann es nützlich sein, zu testen, ob der Effekt ausgeführt wird. Daher enth?lt das Plugin Folgendes:

• Standardeinstellungen
• init() Methode
• start() Methode
• stop() Methode
• isRunning() Methode

Standardeinstellungen

Es ist immer nützlich, bestimmte Standardkonfigurationen zu haben, wenn kein Benutzer bestimmte Einstellungen angibt. Die Haupteigenschaft von "Au?ero -Flashing -Text" ist der zu angezeigte Textsatz, den Sie mit einem Array angeben k?nnen. Da wir den blinkenden Text haben, sind die Aktionen, die der Text ausführt,: 1. werden langsam sichtbar, 2. bleiben Sie für eine Weile sichtbar und verschwinden langsam. Basierend auf diesem Verhalten sind andere nützliche Einstellungen Zeit, Dauer und Ausbrüche. Die letzte Einstellung, die wir hinzufügen, ist die Auswahl, mit der der Benutzer die Reihenfolge ausw?hlen kann, in der die Textauswahl ausgew?hlt ist. M?gliche Werte für selection sind random, ascending und descending. Konvertieren Sie den gesamten Text in Code, und das Ergebnis lautet wie folgt:

var defaultValues = {
  strings: [], // 要顯示的字符串?dāng)?shù)組
  fadeIn: 300, // 以毫秒為單位的時間
  duration: 500, // 以毫秒為單位的時間
  fadeOut: 300, // 以毫秒為單位的時間
  selection: "random" // 文本選擇的順序。可能的值：“random”、“ascending”、“descending”
};

init () Methode

Wir werden die init() -Methode verwenden, um zu testen, wie das Plugin aufgerufen wird, und um den Bereich zu stylen, in dem wir den Effekt ausführen. Es akzeptiert nur einen Parameter, ein Objekt, das mindestens ein Array von Zeichenfolgen enth?lt, die angezeigt werden müssen, aber auch Werte enth?lt, die den Standardwert überschreiben. Alternativ kann die Funktion ohne Parameter aufgerufen werden. In diesem Fall wird der Standardwert angewendet. In diesem Fall wird der zu angezeigte Zeichenfolgen den Text der untergeordneten Knoten des ausgew?hlten Elements verwendet. Die letztere Methode erm?glicht es Ihnen, sofort mit dem Plugin zu experimentieren. Nach dem Test verwendet die init() -Methode das visibility CSS -Attribut, um die untergeordneten Elemente des ausgew?hlten Elements zu verbergen, sodass die H?he des Bereichs nicht abnimmt. Zu diesem Zeitpunkt ist es das Letzte, die Funktion start() zu nennen, um die Animation auszuführen. Der Code für init() lautet wie folgt:

init: function(options) {
  if (typeof options === "undefined" || options === null) {
    options = {};
  }
  if (typeof options.strings === "undefined" || options.strings == null) {
    if (this.children().size() === 0) {
      $.error("如果您沒有指定要顯示的文本，則該元素必須至少有一個子元素");
      return;
    } else {
      options.strings = this.children().map(function() {
        return $(this).text();
      });
    }
  }

  this.css("position", "relative");
  this.children().css("visibility", "hidden");

  methods.start($.extend({}, defaultValues, options), null, this.attr("id"));
}

start () Methode

Dies ist der wichtigste Teil des Plugins, da er den Code enth?lt, der den Effekt tats?chlich ausführt. Es akzeptiert die folgenden drei Parameter:

• settings - Objekt konfigurieren.
• index - Die zu angezeigte Zeichenfolge.
• idElem - Die ID des Bereichs, in dem der Effekt angewendet wird.

genau wie die init() -Methode wird zuerst die Parameter getestet. Danach erzeugt es ein <span> Element, das auf dem angegebenen Bereich schwebt. Nach der Erstellung ist das Element unsichtbar (display: none), sodass es mit der Fade -Methode langsam erscheinen kann. Wie Sie sp?ter sehen werden, hat die Funktion fadeOut() eine Rückruffunktion, die das erstellte Element aus dem DOM entfernen und dann den Effekt anhand der aktuellen Konfiguration mit der n?chsten, vorherigen oder zuf?lligen Zeichenfolge erneut ausführen. Die letzten Zeilen der Methode setzen die Position so, dass das Element in die Gr??e der Region passt.

var defaultValues = {
  strings: [], // 要顯示的字符串?dāng)?shù)組
  fadeIn: 300, // 以毫秒為單位的時間
  duration: 500, // 以毫秒為單位的時間
  fadeOut: 300, // 以毫秒為單位的時間
  selection: "random" // 文本選擇的順序?？赡艿闹担骸皉andom”、“ascending”、“descending”
};

stop () Methode

stop() -Methode wird verwendet, um die Animation zu stoppen, das zuletzt erstellte <span> Element aus dem DOM zu entfernen und dann das normale Sichtbarkeitsattribut wiederherzustellen. Wie Sie im folgenden Quellcode sehen k?nnen, wird der Text reibungslos entfernt. Die Methode stoppt zuerst die Animation (JQuery stop() -Methode), verblasst dann den Text aus, wodurch sie langsam vom Bildschirm (JQuery fadeOut() -Methode) verschwindet und sie dann aus der DOM (JQuery remove() -Methode) entfernt. .

init: function(options) {
  if (typeof options === "undefined" || options === null) {
    options = {};
  }
  if (typeof options.strings === "undefined" || options.strings == null) {
    if (this.children().size() === 0) {
      $.error("如果您沒有指定要顯示的文本，則該元素必須至少有一個子元素");
      return;
    } else {
      options.strings = this.children().map(function() {
        return $(this).text();
      });
    }
  }

  this.css("position", "relative");
  this.children().css("visibility", "hidden");

  methods.start($.extend({}, defaultValues, options), null, this.attr("id"));
}

isRunning () Methode

Diese Methode ist leicht zu verstehen, da sie nur testet, ob ein bestimmtes Element einen Flicker -Effekt ausführt. Der Testprozess überprüft das audero-flashing-text -Element der Klasse <span>. Wenn mindestens ein Element gefunden wird, gibt die Methode true zurück, andernfalls gibt sie false zurück. Der erl?uterte Code lautet wie folgt:

start: function(settings, index, idElem) {
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("無效的方法調(diào)用：未指定設(shè)置");
    return;
  }
  if (index == null) {
    if (settings.selection === "ascending")
      index = 0;
    else if (settings.selection === "descending")
      index = settings.strings.length - 1;
    else
      index = Math.floor(Math.random() * settings.strings.length);
  }

  var $text = $("<span>")
    .text(settings.strings[index])
    .addClass("audero-flashing-text") // 這用作書簽，以幫助停止方法
    .css({
      position: "absolute",
      display: "none",
      fontSize: (Math.random() * 2 + 0.5) + "em"
    })
    .appendTo("#" + idElem)
    .fadeIn(settings.fadeIn)
    .animate({ opacity: 1 }, settings.duration) // 模擬延遲
    .fadeOut(settings.fadeOut, function() {
      // 刪除當(dāng)前元素
      $(this).remove();
      var nextIndex;
      if (settings.selection === "ascending")
        nextIndex = (index + 1) % settings.strings.length;
      else if (settings.selection === "descending")
        nextIndex = (index === 0) ? settings.strings.length : index - 1;
      else
        nextIndex = Math.floor(Math.random() * settings.strings.length);
      // 再次啟動效果
      methods.start(settings, nextIndex, idElem);
    });
  // 設(shè)置位置，以便元素適合區(qū)域的大小
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // 設(shè)置文本的位置
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}

So verwenden Sie dieses Plugin

Jetzt, da Sie alle Methoden gesehen haben, ist es Zeit, einige Beispiele zu überprüfen. Angenommen, Sie haben das folgende <div>:

stop: function() {
  this.css("position", "inherit");
  // 刪除浮動文本
  this
    .children("span.audero-flashing-text")
    .stop(true)
    .fadeOut(defaultValues.fadeOut)
    .remove();
  // 恢復(fù)默認(rèn)可見性
  this.children().css("visibility", "visible");
}

Um den textausführenden Effekt eines Absatzes zu verwenden, müssen Sie nur Folgendes tun:

isRunning: function() {
  return (this.children("span.audero-flashing-text").size() > 0);
}

Folgendes ist ein Beispiel, das das gleiche Tag wie zuvor verwendet, jedoch mit unterschiedlichen Einstellungen:

<div id="box">
  <p>Lorem</p>
  <p>Ipsum</p>
  <p>Dolor</p>
  <p>Sit</p>
  <p>Amet</p>
</div>

Schlussfolgerung

Dieser Artikel zeigt, wie Sie ein JQuery -Plugin erstellen, das einen blinkenden Texteffekt auf einen bestimmten Bereich erzeugt. Laden Sie den Quellcode herunter und anzeigen Sie die im Repository enthaltenen Dokumentation. Das Plugin "Au?ero Blitztext" ist v?llig kostenlos. Sie k?nnen es auch ?ndern oder weiter verbessern, da es eine doppelte Lizenz für MIT und GPL-3.0 hat.

(Die FAQ) sollte hier zum Erstellen eines blinkenden Texteffekts mit JQuery hinzugefügt werden, was mit dem FAQ -Teil des Eingabetxtes übereinstimmt, aber einige Umschreibungen und Streamlinien k?nnen durchgeführt werden, um es pr?gnanter und klarer zu machen.

Das obige ist der detaillierte Inhalt vonErstellen eines blinkenden Texteffekts mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!