核心要點(diǎn)

• 本教程指導(dǎo)您如何創(chuàng)建一個跨瀏覽器兼容的jQuery插件，實現(xiàn)閃爍文本效果，提升網(wǎng)站風(fēng)格和吸引力。該插件還考慮了無障礙性問題，提供stop()方法停止效果。
• 該插件名為“Audero Flashing Text”，遵循jQuery插件最佳實踐開發(fā)。它包含默認(rèn)設(shè)置、初始化、啟動、停止和isRunning方法。這些方法控制要顯示的文本、淡入、持續(xù)時間、淡出時間以及文本選擇的順序。
• start()方法是插件中最關(guān)鍵的部分，因為它運(yùn)行效果。它涉及創(chuàng)建一個浮動在指定區(qū)域內(nèi)的元素，fadeOut()函數(shù)將創(chuàng)建的元素從DOM中移除，然後根據(jù)當(dāng)前配置使用下一個、上一個或隨機(jī)字符串再次運(yùn)行效果。
• 教程最後以使用插件和調(diào)整設(shè)置（如淡出時間和文本選擇順序）的示例結(jié)尾。 “Audero Flashing Text”插件是免費(fèi)的，並且可以根據(jù)MIT和GPL-3.0雙重許可證進(jìn)行修改或改進(jìn)。

有時，您需要一些炫酷的效果來提升網(wǎng)站的外觀和感覺，並吸引訪客的注意。市面上有很多免費(fèi)且可立即使用的插件可以增強(qiáng)網(wǎng)站的樣式。本教程將指導(dǎo)您開發(fā)一個跨瀏覽器jQuery插件，在給定的區(qū)域內(nèi)創(chuàng)建隨機(jī)放置、隨機(jī)大小的閃爍文本。它還將考慮無障礙性問題（畢竟，我們討論的是閃爍文本），提供一個stop()方法來停止效果。該插件允許在同一頁面上進(jìn)行多次動畫，並且每次動畫都完全獨(dú)立於其他動畫。最終結(jié)果將是一個JavaScript文件，您可以輕鬆地將其包含在您的頁面中。為了創(chuàng)建該插件，我將遵循jQuery插件建議的準(zhǔn)則，因此它將使用jQuery插件最佳實踐進(jìn)行開發(fā)。我已經(jīng)在我的文章“將跨瀏覽器上下文菜單實現(xiàn)為jQuery插件”中對此主題進(jìn)行了概述。另請注意，從現(xiàn)在開始，我將該插件稱為“Audero Flashing Text”。

開始

既然我已經(jīng)向您展示了“Audero Flashing Text”的起點(diǎn)，您需要了解它將包含的方法。不難想像，您需要一個方法來初始化插件和一個方法來啟動效果。初始化函數(shù)將利用一些默認(rèn)值，如果未設(shè)置特定值，則將使用這些默認(rèn)值。此外，如上一節(jié)所述，為用戶提供停止效果的能力將會很好。最後但並非最不重要的一點(diǎn)是，擁有一個方法來測試效果是否正在運(yùn)行可能很有用。因此，該插件將包含以下內(nèi)容：

• 默認(rèn)設(shè)置
• init()方法
• start()方法
• stop()方法
• isRunning()方法

默認(rèn)設(shè)置

如果沒有用戶指定某些設(shè)置，擁有某些默認(rèn)配置總是很有用的。 “Audero Flashing Text”的主要屬性是要顯示的一組文本，您可以使用數(shù)組指定。因為我們將擁有閃爍文本，所以文本將執(zhí)行的操作是：1. 緩慢地變得可見，2. 保持可見一段時間，以及 3. 緩慢地消失?；洞诵袨椋渌杏玫脑O(shè)置是淡入時間、持續(xù)時間和淡出時間。我們將添加的最後一個設(shè)置是選擇，它將使用戶能夠選擇文本選擇的順序。 selection的可能值為random、ascending和descending。將所有這些文字轉(zhuǎn)換為代碼，結(jié)果如下：

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

init() 方法

我們將使用init()方法來測試插件是如何調(diào)用的，以及設(shè)置我們將運(yùn)行效果的區(qū)域的樣式。它只接受一個參數(shù)，一個對象，其中至少包含要顯示的字符串?dāng)?shù)組，但也包含將覆蓋默認(rèn)值的值。或者，可以不帶參數(shù)調(diào)用該函數(shù)，在這種情況下，將應(yīng)用默認(rèn)值。在這種情況下，要顯示的字符串集將使用所選元素的子節(jié)點(diǎn)的文本。後一種方法允許您立即開始試驗該插件。在測試之後，init()方法將使用visibility CSS 屬性隱藏所選元素的子元素，因此區(qū)域的高度不會減小。此時，最後要做的事情是調(diào)用start()函數(shù)來運(yùn)行動畫。 init()的代碼如下所示：

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() 方法

這是插件中最重要的一部分，因為它包含實際運(yùn)行效果的代碼。它接受以下三個參數(shù)：

• settings – 配置對象。
• index – 要顯示的字符串。
• idElem – 應(yīng)用效果的區(qū)域的 ID。

就像init()方法一樣，它首先測試參數(shù)。之後，它創(chuàng)建一個<span>元素，該元素將浮動在指定的區(qū)域上。創(chuàng)建後，該元素是不可見的（display: none），因此它可以使用淡入方法緩慢出現(xiàn)。正如您稍後將看到的那樣，fadeOut()函數(shù)有一個回調(diào)函數(shù)，它將從DOM中移除創(chuàng)建的元素，然後根據(jù)當(dāng)前配置使用下一個、上一個或隨機(jī)字符串再次運(yùn)行效果。該方法的最後幾行設(shè)置位置，以便該元素適合區(qū)域的大小。

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

stop() 方法

stop()方法用於停止動畫，從DOM中移除最後創(chuàng)建的<span>元素，然後恢復(fù)正常的可見性屬性。正如您在下面的源代碼中看到的那樣，文本將平滑地移除。該方法首先停止動畫（jQuery stop()方法），然後淡出文本，使其緩慢地從屏幕上消失（jQuery fadeOut()方法），然後將其從DOM中移除（jQuery remove()方法）。

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() 方法

此方法很容易理解，因為它只是測試給定元素是否正在運(yùn)行閃爍效果。測試過程檢查類為audero-flashing-text的<span>元素。如果找到至少一個元素，則該方法返回true，否則返回false。解釋的代碼如下所示：

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

如何使用該插件

既然您已經(jīng)看到了所有方法，那麼是時候查看幾個示例了。假設(shè)您有以下<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");
}

要使用段落的文本運(yùn)行效果，您只需執(zhí)行以下操作：

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

以下是一個使用與之前相同的標(biāo)記但具有不同設(shè)置的示例：

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

結(jié)論

本文向您展示瞭如何創(chuàng)建一個jQuery插件，在給定的區(qū)域上創(chuàng)建閃爍文本效果。要查看其工作原理，請下載源代碼並查看存儲庫中包含的文檔。 “Audero Flashing Text”插件是完全免費(fèi)的。您還可以更改它或進(jìn)一步改進(jìn)它，因為它具有MIT和GPL-3.0雙重許可證。

(此處應(yīng)添加關(guān)於創(chuàng)建使用jQuery的閃爍文本效果的常見問題解答（FAQ），與輸入文本中的FAQ部分內(nèi)容一致，但可以進(jìn)行一些改寫和精簡，使其更簡潔明了。)

以上是用jQuery創(chuàng)建閃爍的文本效果的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！