用jQuery創建閃爍的文本效果

核心要點

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

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

開始

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

• 默認設置
• init()方法
• start()方法
• stop()方法
• isRunning()方法

默認設置

如果沒有用戶指定某些設置，擁有某些默認配置總是很有用的。 “Audero Flashing Text”的主要屬性是要顯示的一組文本，您可以使用數組指定。因為我們將擁有閃爍文本，所以文本將執行的操作是：1. 緩慢地變得可見，2. 保持可見一段時間，以及 3. 緩慢地消失。基於此行為，其他有用的設置是淡入時間、持續時間和淡出時間。我們將添加的最後一個設置是選擇，它將使用戶能夠選擇文本選擇的順序。 selection的可能值為random、ascending和descending。將所有這些文字轉換為代碼，結果如下：

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

init() 方法

我們將使用init()方法來測試插件是如何調用的，以及設置我們將運行效果的區域的樣式。它只接受一個參數，一個對象，其中至少包含要顯示的字符串數組，但也包含將覆蓋默認值的值。或者，可以不帶參數調用該函數，在這種情況下，將應用默認值。在這種情況下，要顯示的字符串集將使用所選元素的子節點的文本。後一種方法允許您立即開始試驗該插件。在測試之後，init()方法將使用visibility CSS 屬性隱藏所選元素的子元素，因此區域的高度不會減小。此時，最後要做的事情是調用start()函數來運行動畫。 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() 方法

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

• settings – 配置對象。
• index – 要顯示的字符串。
• idElem – 應用效果的區域的 ID。

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

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

stop() 方法

stop()方法用於停止動畫，從DOM中移除最後創建的<span>元素，然後恢復正常的可見性屬性。正如您在下面的源代碼中看到的那樣，文本將平滑地移除。該方法首先停止動畫（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() 方法

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

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

如何使用該插件

既然您已經看到了所有方法，那麼是時候查看幾個示例了。假設您有以下<div>：

stop: function() {
  this.css("position", "inherit");
  // 删除浮动文本
  this
    .children("span.audero-flashing-text")
    .stop(true)
    .fadeOut(defaultValues.fadeOut)
    .remove();
  // 恢复默认可见性
  this.children().css("visibility", "visible");
}

要使用段落的文本運行效果，您只需執行以下操作：

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

以下是一個使用與之前相同的標記但具有不同設置的示例：

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

結論

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

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

以上是用jQuery創建閃爍的文本效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！