用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中文网其他相关文章！