Membuat kesan teks berkedip dengan jQuery

mata teras

Tutorial ini membimbing anda bagaimana untuk membuat plugin jQuery yang serasi dengan penyemak imbas yang mencapai kesan teks yang berkelip dan meningkatkan gaya laman web dan rayuan. Plug-in juga menganggap isu aksesibiliti dan menyediakan kesan berhenti
• . stop()
Plugin ini dinamakan "Audero Flashing Text" dan dibangunkan mengikut amalan terbaik plugin jQuery. Ia mengandungi tetapan lalai, permulaan, permulaan, berhenti, dan
• kaedah. Kaedah ini mengawal teks untuk dipaparkan, pudar, tempoh, memudar masa, dan urutan di mana pemilihan teks dipilih. isRunning Kaedah
• adalah bahagian paling kritikal dari plugin kerana ia menjalankan kesannya. Ia melibatkan mewujudkan elemen yang terapung di dalam kawasan yang ditentukan, fungsi start() membuang elemen yang dibuat dari DOM, dan kemudian menjalankan kesannya semula berdasarkan konfigurasi semasa menggunakan rentetan seterusnya, sebelumnya, atau rawak. fadeOut()
Tutorial berakhir dengan contoh menggunakan plugin dan menyesuaikan tetapan seperti masa pudar dan pesanan pemilihan teks. Plugin "Audero Flashing Text" adalah percuma dan boleh diubah suai atau diperbaiki di bawah lesen dua MIT dan GPL-3.0.

Kadang -kadang, anda memerlukan beberapa kesan sejuk untuk meningkatkan rupa dan rasa laman web anda dan menarik perhatian pelawat anda. Terdapat banyak plugin percuma dan segera yang terdapat di pasaran untuk meningkatkan gaya laman web anda. Tutorial ini akan membimbing anda untuk membangunkan plugin jQuery penyemak imbas yang mencipta teks yang diletakkan secara rawak, berukuran secara rawak di dalam kawasan tertentu. Ia juga akan mempertimbangkan isu -isu kebolehaksesan (selepas semua, kita bercakap tentang teks berkelip), menyediakan kaedah

untuk menghentikan kesannya. Plugin ini membolehkan pelbagai animasi pada halaman yang sama, dan setiap animasi sepenuhnya bebas daripada animasi lain. Hasil akhir akan menjadi fail JavaScript yang anda boleh dengan mudah disertakan di halaman anda. Untuk membuat plugin ini, saya akan mengikuti garis panduan yang dicadangkan oleh plugin jQuery, jadi ia akan dibangunkan menggunakan amalan terbaik plugin jQuery. Saya telah menggariskan topik ini dalam jawatan saya "Melaksanakan menu konteks silang pelayar sebagai plugin jQuery". Juga ambil perhatian bahawa mulai sekarang, saya merujuk kepada plugin sebagai "Audero Flashing Text". stop()

Mula

Sekarang saya telah menunjukkan kepada anda titik permulaan "Audero Flashing Text", anda perlu memahami kaedah yang akan disertakan. Tidak sukar untuk membayangkan bahawa anda memerlukan kaedah untuk memulakan plugin dan kaedah untuk memulakan kesannya. Fungsi permulaan akan mengambil kesempatan daripada beberapa nilai lalai, yang akan digunakan jika tiada nilai tertentu ditetapkan. Di samping itu, seperti yang dinyatakan dalam bahagian sebelumnya, keupayaan untuk memberi pengguna kesan berhenti akan menjadi baik. Akhir sekali, mempunyai cara untuk menguji sama ada kesannya berjalan boleh berguna. Oleh itu, plugin akan mengandungi perkara berikut:

• Tetapan lalai
• init() kaedah
• start() kaedah
• stop() kaedah
• isRunning() kaedah

Tetapan lalai

Ia sentiasa berguna untuk mempunyai konfigurasi lalai tertentu jika tiada pengguna menentukan tetapan tertentu. Harta utama "Audero Flashing Text" adalah set teks yang akan dipaparkan, yang boleh anda tentukan menggunakan array. Kerana kita akan mempunyai teks yang berkelip, tindakan yang akan dilakukan teks adalah: 1. Perlahan -lahan menjadi kelihatan, 2. Tetap kelihatan untuk seketika, dan 3. Perlahan -lahan hilang. Berdasarkan tingkah laku ini, tetapan berguna yang lain adalah masa, tempoh, dan masa pudar. Tetapan terakhir yang akan kami tambahkan ialah pemilihan, yang akan membolehkan pengguna memilih pesanan di mana pemilihan teks dipilih. Nilai yang mungkin untuk selection adalah random, ascending dan descending. Tukar semua teks ini ke dalam kod, dan hasilnya adalah seperti berikut:

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

init () kaedah

kami akan menggunakan kaedah init() untuk menguji bagaimana plugin dipanggil dan gaya kawasan di mana kami akan menjalankan kesannya. Ia hanya menerima satu parameter, objek, yang mengandungi sekurang -kurangnya pelbagai rentetan yang akan dipaparkan, tetapi juga mengandungi nilai yang akan mengatasi nilai lalai. Sebagai alternatif, fungsi boleh dipanggil tanpa parameter, di mana nilai lalai akan digunakan. Dalam kes ini, set rentetan yang akan dipaparkan akan menggunakan teks nod kanak -kanak elemen yang dipilih. Kaedah yang terakhir membolehkan anda mula bereksperimen dengan plugin dengan segera. Selepas ujian, kaedah init() akan menggunakan atribut CSS visibility untuk menyembunyikan elemen kanak -kanak elemen yang dipilih, jadi ketinggian kawasan tidak berkurangan. Pada ketika ini, perkara terakhir yang perlu dilakukan ialah memanggil fungsi start() untuk menjalankan animasi. Kod untuk init() adalah seperti berikut:

<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 () kaedah

Ini adalah bahagian paling penting dalam plugin kerana ia mengandungi kod yang sebenarnya menjalankan kesannya. Ia menerima tiga parameter berikut:

• settings - Konfigurasi objek.
• index - rentetan yang akan dipaparkan.
• idElem - ID kawasan di mana kesannya digunakan.

Sama seperti kaedah init(), ia pertama kali menguji parameter. Selepas itu, ia mewujudkan elemen <span></span> yang akan terapung di kawasan yang ditentukan. Selepas penciptaan, elemen tidak kelihatan (display: none), jadi ia boleh kelihatan perlahan menggunakan kaedah pudar. Seperti yang akan anda lihat kemudian, fungsi fadeOut() mempunyai fungsi panggil balik yang akan mengeluarkan elemen yang dibuat dari DOM dan kemudian menjalankan kesannya semula berdasarkan konfigurasi semasa menggunakan rentetan seterusnya, sebelumnya, atau rawak. Beberapa baris terakhir kaedah menetapkan kedudukan supaya elemen sesuai dengan saiz rantau ini.

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

stop () kaedah

Kaedah

stop() digunakan untuk menghentikan animasi, keluarkan elemen <span></span> yang terakhir dibuat dari DOM, dan kemudian pulihkan atribut penglihatan biasa. Seperti yang anda lihat dalam kod sumber di bawah, teks akan dikeluarkan dengan lancar. Kaedah ini mula -mula menghentikan animasi (jQuery stop() kaedah), kemudian memudar teks, menyebabkan ia perlahan -lahan hilang dari skrin (jQuery fadeOut() kaedah), dan kemudian menghilangkannya dari kaedah 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>

isrunning () kaedah

Kaedah ini mudah difahami kerana ia hanya menguji sama ada elemen yang diberikan menjalankan kesan berkedip. Proses ujian menyemak elemen audero-flashing-text kelas <span></span>. Jika sekurang -kurangnya satu elemen dijumpai, kaedah pulangan true, jika tidak, ia kembali false. Kod yang dijelaskan adalah seperti berikut:

<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>

Cara menggunakan plugin ini

Sekarang anda telah melihat semua kaedah, sudah tiba masanya untuk menyemak beberapa contoh. Katakan anda mempunyai yang berikut <div>: <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> Untuk menggunakan teks yang menjalankan kesan perenggan, anda hanya perlu melakukan perkara berikut: </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> Berikut adalah contoh menggunakan tag yang sama seperti sebelumnya tetapi dengan tetapan yang berbeza: </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> Kesimpulan </strong> </p> <p> Artikel ini menunjukkan kepada anda bagaimana untuk membuat plugin jQuery yang menghasilkan kesan teks yang berkelip di kawasan tertentu. Untuk melihat bagaimana ia berfungsi, muat turun kod sumber dan lihat dokumentasi yang dimasukkan ke dalam repositori. Plugin "Audero Flashing Text" adalah percuma. Anda juga boleh mengubahnya atau memperbaikinya kerana ia mempunyai lesen dua untuk MIT dan GPL-3.0. </p> <p> <strong> (Soalan Lazim) harus ditambah di sini untuk membuat kesan teks berkedip menggunakan jQuery, selaras dengan bahagian FAQ dari teks input, tetapi beberapa penulisan dan penyebaran dapat dilakukan untuk menjadikannya lebih ringkas dan jelas. </strong> </p> </div>

Atas ialah kandungan terperinci Membuat kesan teks berkedip dengan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!