Erstellen eines blinkenden Texteffekts mit JQuery

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:

<code class="language-javascript">var defaultValues = {
  strings: [], // 要显示的字符串数组
  fadeIn: 300, // 以毫秒为单位的时间
  duration: 500, // 以毫秒为单位的时间
  fadeOut: 300, // 以毫秒为单位的时间
  selection: "random" // 文本选择的顺序。可能的值：“random”、“ascending”、“descending”
};</code>

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:

<code class="language-javascript">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"));
}</code>

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></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.

<code class="language-javascript">var defaultValues = {
  strings: [], // 要显示的字符串数组
  fadeIn: 300, // 以毫秒为单位的时间
  duration: 500, // 以毫秒为单位的时间
  fadeOut: 300, // 以毫秒为单位的时间
  selection: "random" // 文本选择的顺序。可能的值：“random”、“ascending”、“descending”
};</code>

stop () Methode

Die

stop() -Methode wird verwendet, um die Animation zu stoppen, das zuletzt erstellte <span></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. .

<code class="language-javascript">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"));
}</code>

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></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:

<code class="language-javascript">start: function(settings, index, idElem) {
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("无效的方法调用：未指定设置");
    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() {
      // 删除当前元素
      $(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);
    });
  // 设置位置，以便元素适合区域的大小
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // 设置文本的位置
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}</span></code>

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>: <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;stop: function() { this.css(&quot;position&quot;, &quot;inherit&quot;); // 删除浮动文本 this .children(&quot;span.audero-flashing-text&quot;) .stop(true) .fadeOut(defaultValues.fadeOut) .remove(); // 恢复默认可见性 this.children().css(&quot;visibility&quot;, &quot;visible&quot;); }&lt;/code&gt;</pre> <p> Um den textausführenden Effekt eines Absatzes zu verwenden, müssen Sie nur Folgendes tun: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;isRunning: function() { return (this.children(&quot;span.audero-flashing-text&quot;).size() &gt; 0); }&lt;/code&gt;</pre> <p> Folgendes ist ein Beispiel, das das gleiche Tag wie zuvor verwendet, jedoch mit unterschiedlichen Einstellungen: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div id=&quot;box&quot;&gt; &lt;p&gt;Lorem&lt;/p&gt; &lt;p&gt;Ipsum&lt;/p&gt; &lt;p&gt;Dolor&lt;/p&gt; &lt;p&gt;Sit&lt;/p&gt; &lt;p&gt;Amet&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre> <p> <strong> Schlussfolgerung </strong> </p> <p> 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. </p> <p> <strong> (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. </strong> </p> </div>

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!