jQueryで点滅するテキスト効果を作成します

コアポイント

このチュートリアルは、フラッシュテキスト効果を実現し、ウェブサイトのスタイルとアピールを強化するクロスブラウザー互換のjQueryプラグインを作成する方法をガイドします。プラグインはまた、アクセシビリティの問題を考慮し、
• メソッドの停止効果を提供します。 stop()
プラグインは「Audero Flashing Text」という名前で、jQueryプラグインのベストプラクティスに従って開発されています。デフォルトの設定、初期化、開始、停止、および
• メソッドが含まれています。これらのメソッドは、表示されるテキスト、フェードイン、期間、フェードアウト、およびテキスト選択が選択される順序を制御します。 isRunning
• メソッドは、効果を実行するため、プラグインの最も重要な部分です。指定された領域内にフローティングする要素を作成することを伴い、start()関数は作成された要素をDOMから削除し、次の構成、前、またはランダムな文字列を使用して現在の構成に基づいて効果を再度実行します。 fadeOut()
チュートリアルは、プラグインを使用し、フェードアウト時間やテキスト選択の注文などの設定を調整する例で終わります。 「Audero Flashing Text」プラグインは無料で、MITおよびGPL-3.0のデュアルライセンスの下で変更または改善できます。

時々、あなたのウェブサイトのルックアンドフィールを強化し、訪問者の注目を集めるためにいくつかのクールな効果が必要です。あなたのウェブサイトのスタイルを強化するために、市場には多くの無料のインスタントプラグインがあります。このチュートリアルでは、特定の領域内にランダムに配置されたランダムにサイズのフラッシュテキストを作成するクロスブラウザーjQueryプラグインを開発するように導きます。また、アクセシビリティの問題を検討します（結局、テキストのフラッシュについて話している）。効果を停止する方法を提供します。このプラグインを使用すると、同じページで複数のアニメーションが可能になり、各アニメーションは他のアニメーションから完全に独立しています。最終結果は、ページに簡単に含めることができるJavaScriptファイルになります。このプラグインを作成するには、jQueryプラグインによって提案されたガイドラインに従っているため、jQueryプラグインのベストプラクティスを使用して開発されます。 「JQUERYプラグインとしてクロスブラウザーコンテキストメニューを実装する」という投稿で、このトピックを既に概説しました。また、これからは、プラグインを「Audero Flashing Text」と呼んでいることに注意してください。

stop()

start

「Audero Flashing Text」の出発点を示したので、それに含まれる方法を理解する必要があります。プラグインを初期化する方法と効果を開始する方法が必要だと想像するのは難しくありません。初期化関数は、特定の値が設定されていない場合に使用されるいくつかのデフォルト値を利用します。さらに、前のセクションで述べたように、ユーザーにストップ効果を提供する機能が良好になります。最後になりましたが、効果が実行されているかどうかをテストする方法を持つことが役立ちます。したがって、プラグインには次のものが含まれます

• デフォルト設定
• init()メソッド
• start()メソッド
• stop()メソッド
• isRunning()メソッド

デフォルト設定

特定の設定を指定していない場合、特定のデフォルト構成を行うと常に便利です。 「Auderoフラッシュテキスト」の主なプロパティは、表示されるテキストのセットで、配列を使用して指定できます。点滅するテキストがあるため、テキストが行うアクションは次のとおりです。1。ゆっくりと見え、2。しばらく見えるようになり、3。ゆっくりと消えます。この動作に基づいて、他の有用な設定は、フェードイン時間、期間、フェードアウト時間です。最後に追加する設定は選択です。これにより、ユーザーはテキスト選択が選択される順序を選択できます。可能な値はselection、random、ascending、descendingです。これらすべてのテキストをコードに変換すると、結果は次のとおりです。

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

init（）メソッド

メソッドを使用して、プラグインがどのように呼び出されるかをテストし、効果を実行する領域をスタイリングします。表示される文字列の少なくとも配列を含む1つのパラメーターのみを受け入れますが、デフォルト値をオーバーライドする値も含まれます。あるいは、パラメーターなしで関数を呼び出すことができます。その場合、デフォルト値が適用されます。この場合、表示される文字列のセットは、選択した要素の子ノードのテキストを使用します。後者の方法では、すぐにプラグインの実験を開始できます。テスト後、init()メソッドはinit()CSS属性を使用して、選択した要素の子要素を非表示にするため、エリアの高さは低下しません。この時点で、最後に行うべきことは、アニメーションを実行するためにvisibility関数を呼び出すことです。 start()のコードは次のとおりです init()

start（）method

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"));
}

これは、実際に効果を実行するコードが含まれているため、プラグインの最も重要な部分です。次の3つのパラメーターを受け入れます

- オブジェクトを構成します。

• settings - 表示される文字列。
• index - 効果が適用される領域のID。
• idElem
メソッドと同じように、最初にパラメーターをテストします。その後、指定された領域に浮かぶ

要素を作成します。作成後、要素は目に見えない（

）ため、フェードメソッドを使用してゆっくりと表示される可能性があります。後で見るように、init()関数には、作成された要素をDOMから削除し、次の構成、前、またはランダムな文字列を使用して現在の構成に基づいて再度効果を実行するコールバック関数があります。メソッドの最後の数行で、要素が領域のサイズに収まるように位置を設定します。 <span>

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

stop（）method

stop()メソッドは、アニメーションを停止し、最後に作成された<span>要素をDOMから削除してから、通常の可視性属性を復元するために使用されます。以下のソースコードでわかるように、テキストはスムーズに削除されます。このメソッドは最初にアニメーション（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（）Method

この方法は、特定の要素がちらつき効果を実行しているかどうかをテストするだけなので、理解しやすいです。テストプロセスでは、クラスaudero-flashing-textの<span>要素をチェックします。少なくとも1つの要素が見つかった場合、メソッドは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);
}

この記事では、特定の領域に点滅するテキスト効果を作成するjQueryプラグインを作成する方法を示します。それがどのように機能するかを確認するには、ソースコードをダウンロードし、リポジトリに含まれるドキュメントを表示します。 「Audero Flashing Text」プラグインは完全に無料です。また、MITとGPL-3.0のデュアルライセンスがあるため、変更したり改善したりすることもできます。

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

（FAQ）は、入力テキストのFAQ部分と一致して、jQueryを使用したフラッシュテキスト効果の作成に追加する必要がありますが、より簡潔で明確にするために、いくつかの書き換えと合理化ができます。

以上がjQueryで点滅するテキスト効果を作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。