コアポイント

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

時(shí)々、あなたのウェブサイトのルックアンドフィールを強(qiáng)化し、訪(fǎng)問(wèn)者の注目を集めるためにいくつかのクールな効果が必要です。あなたのウェブサイトのスタイルを強(qiáng)化するために、市場(chǎng)には多くの無(wú)料のインスタントプラグインがあります。このチュートリアルでは、特定の領(lǐng)域內(nèi)にランダムに配置されたランダムにサイズのフラッシュテキストを作成するクロスブラウザーjQueryプラグインを開(kāi)発するように導(dǎo)きます。また、アクセシビリティの問(wèn)題を検討します（結(jié)局、テキストのフラッシュについて話(huà)している）。効果を停止する方法を提供します。このプラグインを使用すると、同じページで複數(shù)のアニメーションが可能になり、各アニメーションは他のアニメーションから完全に獨(dú)立しています。最終結(jié)果は、ページに簡(jiǎn)単に含めることができるJavaScriptファイルになります。このプラグインを作成するには、jQueryプラグインによって提案されたガイドラインに従っているため、jQueryプラグインのベストプラクティスを使用して開(kāi)発されます。 「JQUERYプラグインとしてクロスブラウザーコンテキストメニューを?qū)g裝する」という投稿で、このトピックを既に概説しました。また、これからは、プラグインを「Audero Flashing Text」と呼んでいることに注意してください。

stop()

start

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

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

デフォルト設(shè)定

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

var defaultValues = {
  strings: [], // 要顯示的字符串?dāng)?shù)組
  fadeIn: 300, // 以毫秒為單位的時(shí)間
  duration: 500, // 以毫秒為單位的時(shí)間
  fadeOut: 300, // 以毫秒為單位的時(shí)間
  selection: "random" // 文本選擇的順序?？赡艿闹担骸皉andom”、“ascending”、“descending”
};

init（）メソッド

メソッドを使用して、プラグインがどのように呼び出されるかをテストし、効果を?qū)g行する領(lǐng)域をスタイリングします。表示される文字列の少なくとも配列を含む1つのパラメーターのみを受け入れますが、デフォルト値をオーバーライドする値も含まれます。あるいは、パラメーターなしで関數(shù)を呼び出すことができます。その場(chǎng)合、デフォルト値が適用されます。この場(chǎng)合、表示される文字列のセットは、選択した要素の子ノードのテキストを使用します。後者の方法では、すぐにプラグインの実験を開(kāi)始できます。テスト後、init()メソッドはinit()CSS屬性を使用して、選択した要素の子要素を非表示にするため、エリアの高さは低下しません。この時(shí)點(diǎn)で、最後に行うべきことは、アニメーションを?qū)g行するためにvisibility関數(shù)を呼び出すことです。 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("如果您沒(méi)有指定要顯示的文本，則該元素必須至少有一個(gè)子元素");
      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"));
}

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

- オブジェクトを構(gòu)成します。

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

要素を作成します。作成後、要素は目に見(jiàn)えない（

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

var defaultValues = {
  strings: [], // 要顯示的字符串?dāng)?shù)組
  fadeIn: 300, // 以毫秒為單位的時(shí)間
  duration: 500, // 以毫秒為單位的時(shí)間
  fadeOut: 300, // 以毫秒為單位的時(shí)間
  selection: "random" // 文本選擇的順序?？赡艿闹担骸皉andom”、“ascending”、“descending”
};

stop（）method

stop()メソッドは、アニメーションを停止し、最後に作成された<span>要素をDOMから削除してから、通常の可視性屬性を復(fù)元するために使用されます。以下のソースコードでわかるように、テキストはスムーズに削除されます。このメソッドは最初にアニメーション（jQuery stop()メソッド）を停止し、テキストをフェードアウトし、畫(huà)面からゆっくりと消え（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("如果您沒(méi)有指定要顯示的文本，則該元素必須至少有一個(gè)子元素");
      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

この方法は、特定の要素がちらつき効果を?qū)g行しているかどうかをテストするだけなので、理解しやすいです。テストプロセスでは、クラスaudero-flashing-textの<span>要素をチェックします。少なくとも1つの要素が見(jiàn)つかった場(chǎng)合、メソッドはtrueを返します。説明されているコードは次のとおりです false このプラグインの使用方法

start: function(settings, index, idElem) {
  if (typeof idElem === "undefined") {
    idElem = this.selector;
  }
  if (typeof settings === "undefined") {
    $.error("無(wú)效的方法調(diào)用：未指定設(shè)置");
    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") // 這用作書(shū)簽，以幫助停止方法
    .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() {
      // 刪除當(dāng)前元素
      $(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);
      // 再次啟動(dòng)效果
      methods.start(settings, nextIndex, idElem);
    });
  // 設(shè)置位置，以便元素適合區(qū)域的大小
  var posX = Math.floor(Math.random() * ($("#" + idElem).width() - $text.outerWidth()));
  var posY = Math.floor(Math.random() * ($("#" + idElem).height() - $text.outerHeight()));
  // 設(shè)置文本的位置
  $text.css({
    left: posX + "px",
    top: posY + "px"
  });
}

<

すべての方法を見(jiàn)たので、いくつかの例をチェックする時(shí)が來(lái)ました。次のを持っているとします

段落の実行効果を?qū)g行するテキストを使用するには、次のことを行う必要があります。

<div>以下は、以前と同じタグを使用しているが、異なる設(shè)定を使用した例です。

stop: function() {
  this.css("position", "inherit");
  // 刪除浮動(dòng)文本
  this
    .children("span.audero-flashing-text")
    .stop(true)
    .fadeOut(defaultValues.fadeOut)
    .remove();
  // 恢復(fù)默認(rèn)可見(jiàn)性
  this.children().css("visibility", "visible");
}

結(jié)論

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

この記事では、特定の領(lǐng)域に點(diǎn)滅するテキスト効果を作成するjQueryプラグインを作成する方法を示します。それがどのように機(jī)能するかを確認(rèn)するには、ソースコードをダウンロードし、リポジトリに含まれるドキュメントを表示します。 「Audero Flashing Text」プラグインは完全に無(wú)料です。また、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を使用したフラッシュテキスト効果の作成に追加する必要がありますが、より簡(jiǎn)潔で明確にするために、いくつかの書(shū)き換えと合理化ができます。

以上がjQueryで點(diǎn)滅するテキスト効果を作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。