核心要点
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中文网其他相关文章！
