使用jQuery创建闪烁的文本效果

有时，您需要一种不错的效果来增强网站的外观和风格，并吸引访问者的注意力。 有许多免费且易于使用的插件可以增强您网站的风格。 本教程将指导您开发跨浏览器的jQuery插件，该插件可在给定的框内创建随机放置，大小随机的闪烁文本。 它还将考虑到残疾问题（嘿，我们正在谈论闪烁文本），提供了stop()方法来停止这种影响。 该插件将允许在同一页面上播放多个动画，每个动画完全独立于其他动画。 最终结果将是一个JavaScript文件，您可以轻松地将其包含在页面中。

为了创建插件，我将遵循jQuery插件建议的准则 ，因此将使用jQuery插件最佳实践进行开发。 我已经在我的文章《 将跨浏览器上下文菜单作为jQuery插件实现》中对此主题进行了概述。 还要注意，从现在开始，我将插件称为“ Audero Flashing Text”。

入门

现在，我向您展示了“ Audero Flashing Text”的起点，您需要知道构成它的方法。 很难想象您需要一个初始化插件和一个启动效果的人。 如果未设置特定值，则初始化函数将利用一些默认值。 而且，如前一部分所述，最好为您的用户提供停止效果的功能。 最后但并非最不重要的一点是，有一种方法可以测试效果是否正在运行。 因此，该插件将包含以下内容：

• 默认设置
• init()方法
• start()方法
• stop()方法
• isRunning()方法

默认设置

如果用户未指定某些默认配置，这总是很有用的。 “ Audero Flashing Text”的主要属性是一组文本，显示可以使用数组指定的文本。 因为我们会有闪烁的文本，所以文本将执行的操作是：1.逐渐变得可见，2.保持可见一段时间，以及3.逐渐消失。 基于此行为，其他有用的设置是淡入，持续时间和淡出时间。 我们要添加的最后一个设置是selection ，它将使用户能够选择文本选择的顺序。 selection的可能值为随机，升序和降序。 将所有这些单词转换为代码会产生以下结果。

var defaultValues = {
  strings: [], // Array of strings to show
  fadeIn: 300, // Time in milliseconds
  duration: 500, // Time in milliseconds
  fadeOut: 300, // Time in milliseconds
  selection: "random" // The order of selection of the text.
                      //Possible values: "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("If you don't specify the texts to show, the element must have at least a child");
      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中删除创建的元素，然后根据当前配置，使用下一个，上一个或随机字符串再次运行效果。 该方法的最后几行设置位置，以便该元素适合框的大小。

start: function(settings, index, idElem)
{
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("Invalid method call: No settings specified");
    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") // This is used as a bookmark to help the stop method
  .css({
    position: "absolute",
    display: "none",
    fontSize: (Math.random() * 2 + 0.5) + "em"
  })
  .appendTo("#" + idElem)
  .fadeIn(settings.fadeIn)
  .animate({opacity: 1}, settings.duration) // Simulate delay
  .fadeOut(settings.fadeOut, function() {
    // Remove the current element
    $(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);
    // Start again the effect
    methods.start(settings, nextIndex, idElem);
  });
  // Set the position so the element will fit the box's size
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // Set the position of the text
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}

stop()方法

stop()方法用于停止动画，删除从DOM创建的最后一个<span>元素，然后恢复正常的可见性属性。 正如您在下面的源中看到的那样，该文本已顺利删除。 该方法首先停止动画（jQuery stop()方法），然后淡出文本，使其从屏幕上慢慢消失（jQuery fadeOut()方法），然后从DOM中将其删除（jQuery remove()方法）。

stop: function()
{
  this.css("position", "inherit");
  // Removes the floating text
  this
  .children("span.audero-flashing-text")
  .stop(true)
  .fadeOut(defaultValues.fadeOut)
  .remove();
  // Restore the default visibility
  this.children().css("visibility", "visible");
}

isRunning()方法

该方法非常易于理解，因为它仅测试给定元素是否正在运行闪烁效果。 测试过程检查audero-flashing-text类的<span>元素。 如果找到至少一个元素，则该方法返回true否则返回false 。 下面列出了解释的代码。

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

如何使用插件

既然您已经了解了所有方法，现在该看几个示例了。 假设您具有以下<div> 。

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

要使用段落的文本来产生效果，您要做的就是：

$("#box").auderoFlashingText();

以下是使用相同标记但设置不同的示例：

$("#box").auderoFlashingText({
  fadeOut: 1500,
  selection: "ascending"
});

结论

本文向您展示了如何创建一个jQuery插件，该插件在给定的框上创建闪烁的文本效果。 要查看其工作原理，请下载源代码并查看存储库中包含的文档。 Audero Flashing Text插件是完全免费的。 您还可以对其进行更改或进一步改进，因为它是根据MIT和GPL-3.0双重许可的

From: https://www.sitepoint.com/creating-a-flashing-text-effect-with-jquery/