Création d'un effet texte clignotant avec jQuery

Points de base

• Ce didacticiel vous guide comment créer un plugin jQuery compatible entre les navigateurs croisés qui réalise les effets de texte clignotants et améliore le style et l'attrait du site Web. Le plug-in prend également en compte les problèmes d'accessibilité et fournit stop() l'effet d'arrêt de méthode.
• Le plugin est nommé "Texte de clignotement aude" et est développé conformément aux meilleures pratiques du plugin jQuery. Il contient des paramètres par défaut, l'initialisation, le démarrage, l'arrêt et les méthodes isRunning. Ces méthodes contrôlent le texte à afficher, s'estompent, la durée, le temps de décoloration et l'ordre dans lequel la sélection de texte est sélectionnée.
La méthode
• start() est la partie la plus critique du plugin car elle exécute l'effet. Il s'agit de créer un élément flottant dans une zone spécifiée, la fonction fadeOut() supprime l'élément créé du DOM, puis exécute à nouveau l'effet en fonction de la configuration actuelle en utilisant la chaîne suivante, précédente ou aléatoire.
• Le tutoriel se termine par des exemples d'utilisation des plugins et des paramètres de réglage tels que l'ordre de sélection de la décoloration et de la sélection de texte. Le plugin "aude du texte clignotant" est gratuit et peut être modifié ou amélioré sous la double licence du MIT et GPL-3.0.

Parfois, vous avez besoin d'effets sympas pour améliorer l'apparence de votre site Web et attirer l'attention de vos visiteurs. Il existe de nombreux plugins gratuits et instantanés disponibles sur le marché pour améliorer le style de votre site Web. Ce tutoriel vous guidera pour développer un plugin jQuery cross-browser qui crée un texte clignotant placé au hasard de taille aléatoire dans une zone donnée. Il tiendra également compte des problèmes d'accessibilité (après tout, nous parlons de texte clignotant), fournissant une méthode stop() pour arrêter l'effet. Ce plugin autorise plusieurs animations sur la même page, et chaque animation est complètement indépendante des autres animations. Le résultat final sera un fichier JavaScript que vous pouvez facilement inclure dans votre page. Pour créer ce plugin, je suivrai les directives suggérées par le plugin jQuery, donc il sera développé à l'aide du plugin jQuery les meilleures pratiques. J'ai déjà décrit ce sujet dans mon article "Implémentation d'un menu contextuel de croisement en tant que plugin jQuery". Notez également qu'à partir de maintenant, je me réfère au plugin comme "texte clignotant AUDERO".

Démarrer

Maintenant que je vous ai montré le point de départ du «texte clignotant aude», vous devez comprendre les méthodes qu'il comprendra. Il n'est pas difficile d'imaginer que vous avez besoin d'une méthode pour initialiser le plugin et une méthode pour démarrer l'effet. La fonction d'initialisation profitera de certaines valeurs par défaut, qui seront utilisées si aucune valeur spécifique n'est définie. De plus, comme mentionné dans la section précédente, la possibilité de fournir aux utilisateurs un effet d'arrêt sera bonne. Enfin et surtout, avoir un moyen de tester si l'effet est en cours d'exécution peut être utile. Par conséquent, le plugin contiendra ce qui suit:

• Paramètres par défaut
• init() Méthode
• start() Méthode
• stop() Méthode
• isRunning() Méthode

Paramètres par défaut

Il est toujours utile d'avoir certaines configurations par défaut si aucun utilisateur ne spécifie certains paramètres. La propriété principale du "texte clignotant aude" est l'ensemble du texte à afficher, que vous pouvez spécifier à l'aide d'un tableau. Parce que nous aurons le texte clignotant, les actions que le texte fera est: 1. Devenir lentement visible, 2. Restez visible pendant un certain temps et 3. Disons lentement. Sur la base de ce comportement, d'autres paramètres utiles sont le temps de décoloration, la durée et le temps de décoloration. Le dernier paramètre que nous ajouterons est la sélection, qui permettra à l'utilisateur de sélectionner l'ordre dans lequel la sélection de texte est sélectionnée. Les valeurs possibles pour selection sont random, ascending et descending. Convertissez tous ces texte en code, et le résultat est le suivant:

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

Méthode init ()

Nous utiliserons la méthode init() pour tester comment le plugin est appelé et pour coiffer la zone où nous exécuterons l'effet. Il n'accepte qu'un seul paramètre, un objet, qui contient au moins un tableau de chaînes à afficher, mais contient également des valeurs qui remplaceront la valeur par défaut. Alternativement, la fonction peut être appelée sans paramètres, auquel cas la valeur par défaut sera appliquée. Dans ce cas, l'ensemble des chaînes à afficher utilisera le texte des nœuds enfants de l'élément sélectionné. Cette dernière méthode vous permet de commencer à expérimenter immédiatement le plugin. Après test, la méthode init() utilisera l'attribut visibility CSS pour masquer les éléments enfants de l'élément sélectionné, de sorte que la hauteur de la zone ne diminue pas. À ce stade, la dernière chose à faire est d'appeler la fonction start() pour exécuter l'animation. Le code pour init() est le suivant:

<code class="language-javascript">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"));
}</code>

start () Méthode

Il s'agit de la partie la plus importante du plugin car elle contient le code qui exécute réellement l'effet. Il accepte les trois paramètres suivants:

• settings - Configurer l'objet.
• index - La chaîne à afficher.
• idElem - L'ID de la zone où l'effet est appliqué.

Tout comme la méthode init(), il teste d'abord les paramètres. Après cela, il crée un élément <span></span> qui flottera sur la zone spécifiée. Après la création, l'élément est invisible (display: none), il peut donc apparaître lentement en utilisant la méthode de fondu. Comme vous le verrez plus loin, la fonction fadeOut() a une fonction de rappel qui supprimera l'élément créé du DOM, puis exécutera à nouveau l'effet en fonction de la configuration actuelle à l'aide de la chaîne suivante, précédente ou aléatoire. Les dernières lignes de la méthode définissent la position de sorte que l'élément s'adapte à la taille de la région.

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

stop () Méthode

La méthode

stop() est utilisée pour arrêter l'animation, supprimer l'élément <span></span> Créé du DOM du DOM, puis restaurer l'attribut de visibilité normal. Comme vous pouvez le voir dans le code source ci-dessous, le texte sera supprimé en douceur. La méthode arrête d'abord la méthode d'animation (jQuery stop()), puis s'estompe le texte, la faisant disparaître lentement de l'écran (méthode jQuery fadeOut()), puis la supprime de la méthode DOM (jQuery remove())) .

<code class="language-javascript">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"));
}</code>

Méthode Isrunning ()

Cette méthode est facile à comprendre car elle teste simplement si un élément donné exécute un effet scintillant. Le processus de test vérifie l'élément audero-flashing-text de la classe <span></span>. Si au moins un élément est trouvé, la méthode renvoie true, sinon elle renvoie false. Le code expliqué est le suivant:

<code class="language-javascript">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"
  });
}</span></code>

Comment utiliser ce plugin

Maintenant que vous avez vu toutes les méthodes, il est temps de vérifier quelques exemples. Supposons que vous ayez les <div>: suivants <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;stop: function() { this.css(&quot;position&quot;, &quot;inherit&quot;); // 删除浮动文本 this .children(&quot;span.audero-flashing-text&quot;) .stop(true) .fadeOut(defaultValues.fadeOut) .remove(); // 恢复默认可见性 this.children().css(&quot;visibility&quot;, &quot;visible&quot;); }&lt;/code&gt;</pre> <p> Pour utiliser l'effet exécutif du texte d'un paragraphe, il vous suffit de faire ce qui suit: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;isRunning: function() { return (this.children(&quot;span.audero-flashing-text&quot;).size() &gt; 0); }&lt;/code&gt;</pre> <p> Ce qui suit est un exemple utilisant la même balise qu'avant mais avec différents paramètres: </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-html&quot;&gt;&lt;div id=&quot;box&quot;&gt; &lt;p&gt;Lorem&lt;/p&gt; &lt;p&gt;Ipsum&lt;/p&gt; &lt;p&gt;Dolor&lt;/p&gt; &lt;p&gt;Sit&lt;/p&gt; &lt;p&gt;Amet&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre> <p> <strong> Conclusion </strong> </p> <p> Cet article vous montre comment créer un plugin jQuery qui crée un effet texte clignotant sur une zone donnée. Pour voir comment cela fonctionne, téléchargez le code source et affichez la documentation incluse dans le référentiel. Le plugin "AUDERO FLASHING Text" est entièrement gratuit. Vous pouvez également le modifier ou l'améliorer davantage car il a une double licence pour le MIT et le GPL-3.0. </p> <p> <strong> (La FAQ) doit être ajoutée ici lors de la création d'un effet de texte clignotant à l'aide de jQuery, cohérent avec la partie FAQ du texte d'entrée, mais certaines réécritures et rationalisation peuvent être effectuées pour la rendre plus concise et claire. </strong> </p> </div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!