核心要點
stop()方法停止效果。 isRunning方法。這些方法控制要顯示的文本、淡入、持續時間、淡出時間以及文本選擇的順序。 start()方法是插件中最關鍵的部分，因為它運行效果。它涉及創建一個浮動在指定區域內的元素，fadeOut()函數將創建的元素從DOM中移除，然後根據當前配置使用下一個、上一個或隨機字符串再次運行效果。 有時，您需要一些炫酷的效果來提升網站的外觀和感覺，並吸引訪客的注意。市面上有很多免費且可立即使用的插件可以增強網站的樣式。本教程將指導您開發一個跨瀏覽器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()方法將使用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"));
}這是插件中最重要的一部分，因為它包含實際運行效果的代碼。它接受以下三個參數：
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()方法用於停止動畫，從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"));
}此方法很容易理解，因為它只是測試給定元素是否正在運行閃爍效果。測試過程檢查類為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中文網其他相關文章！
