jquery menukar teks menjadi foto

Dengan perkembangan teknologi Internet dan mudah alih, kesan dinamik telah menjadi hala tuju penting dalam pembangunan web. Di sini, kami akan memperkenalkan cara menggunakan jQuery untuk mengubah teks menjadi foto.

Dalam reka bentuk web, teks dan gambar adalah elemen yang sangat penting. Mereka boleh membantu tapak web meningkatkan pengalaman pengguna dan meningkatkan daya tarikan halaman. Secara tradisinya, teks dan gambar wujud secara bebas, tetapi kita boleh menggunakan beberapa teknik untuk menggabungkannya untuk mencapai kesan yang lebih jelas dan menarik.

Kesan teks ke foto boleh digunakan dalam pengenalan produk, iklan tapak web, pengenalan perjalanan, dsb. Apabila pengguna melayang di atas teks, teks memudar menjadi foto, menarik perhatian pengguna. Kesan ini bukan sahaja meningkatkan keindahan halaman, tetapi juga membolehkan pengguna memperoleh pemahaman yang lebih mendalam tentang produk atau perkhidmatan.

JQuery ialah perpustakaan JavaScript yang sangat berkuasa yang boleh membantu kami menulis skrip js dengan cepat untuk mencapai pelbagai kesan dinamik. Di sini, kami akan memperkenalkan cara menggunakan jQuery untuk mengubah teks menjadi foto.

Idea Pelaksanaan

Pertama sekali, kita perlu menjelaskan idea asas untuk mencapai kesan ini. Apabila pengguna mengarahkan tetikus ke atas teks yang ditentukan, kita perlu menggantikannya secara beransur-ansur dengan imej. Secara khusus, kita boleh menggunakan kaedah berikut:

1. Pertama, kita perlu pratetapkan kod yang sepadan dengan teks dan imej dalam fail HTML, yang boleh mengurangkan kerumitan skrip.
2. Apabila pengguna mengarahkan tetikus ke atas teks yang ditentukan, kita perlu menggunakan acara alih tetikus jQuery untuk mencetuskan skrip.
3. Dalam skrip, kita perlu menggantikan kandungan teks secara beransur-ansur dengan imej, yang boleh dicapai dengan menukar gaya teks secara beransur-ansur.
4. Akhir sekali, apabila tetikus meninggalkan teks, kita perlu memulihkan kandungan teks kepada gaya asalnya.

Butiran pelaksanaan

Seterusnya, kami akan memperkenalkan langkah demi langkah cara menggunakan jQuery untuk mencapai kesan menukar teks kepada foto.

1. Tetapkan struktur HTML

Pertama, dalam HTML, kita perlu pratetap teks untuk diganti dan imej yang sepadan. Kodnya adalah seperti berikut:

<p class="text">这是一段需要替换的文字。</p>
<img class="image lazy"  src="/static/imghwm/default1.png"  data-src="image.jpg"  alt="这是一张图片。"   style="max-width:90%">

Di sini, kami membenamkan "Ini adalah sekeping teks yang perlu diganti ke dalam perenggan, dan kemudian tetapkan laluan imej yang sepadan dalam elemen imej."

Perlu diingatkan di sini bahawa sebagai tambahan kepada elemen teks terbenam, kita juga perlu menetapkan elemen imej. Tujuannya adalah untuk dapat mengubah gayanya secara beransur-ansur dalam skrip, dan akhirnya mencapai kesan menukar teks menjadi foto.

2. Reka bentuk gaya CSS

Seterusnya, kita perlu menetapkan gaya CSS, yang boleh memberikan sokongan gaya yang diperlukan untuk skrip. Kodnya adalah seperti berikut:

<style>
.text {
  position: relative;
  z-index: 1;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}
</style>

Di sini, kami menetapkan elemen teks kepada kedudukan relatif (kedudukan: relatif;), dan kemudian menetapkan tahapnya kepada 1 (z-index: 1;), yang memastikan bahawa elemen gambar secara beransur-ansur Apabila menggantikan teks, teks muncul di atas imej.

Elemen gambar ditetapkan kepada kedudukan mutlak (kedudukan: mutlak;), dan tahapnya ditetapkan kepada 0 (indeks-z: 0;), yang memastikan gambar dipaparkan di bawah teks. Selain itu, kami menetapkan ketelusan imej kepada 0 (kelegapan: 0;) supaya ia muncul secara beransur-ansur.

3. Menulis skrip jQuery

Seterusnya, kita perlu menggunakan acara alih tetikus jQuery (mouseover) dan acara keluar tetikus (mouseout) untuk menulis skrip. Kodnya adalah seperti berikut:

<script>
$(function() {
  $('.text').mouseover(function() {
    $(this).addClass('active');
  }).mouseout(function() {
    $(this).removeClass('active');
  });
  
  $('.text.active').each(function() {
    var text = $(this).text();
    var image = $(this).next('.image');
    var opacity = 0;
    var timer = setInterval(function() {
      $(this).css('opacity', opacity);
      opacity += 0.1;
      if (opacity >= 1) {
        clearInterval(timer);
        $(this).text('');
        $(this).prev('.text').hide();
      }
    }.bind(image), 50);
  });
});
</script>

Di sini, kami mula-mula mendaftarkan acara alih tetikus (mouseover) dan acara keluar tetikus (mouseout) dalam acara document.ready().

Apabila tetikus melayang di atas teks, kami akan menambah kelas .aktif, yang boleh menyediakan syarat yang diperlukan untuk gaya berubah.

Apabila tetikus bergerak keluar daripada teks, kami akan mengalih keluar kelas .active untuk memulihkan gaya asal teks.

Seterusnya, kami menggunakan kaedah each() jQuery untuk lelaran melalui semua elemen teks dengan nama kelas .active. Untuk setiap elemen teks, kami akan mendapatkan kandungan teks dan elemen imej yang sepadan, dan menetapkan pemasa untuk memaparkan imej secara beransur-ansur.

Dalam pemasa, kami akan menukar ketelusan elemen gambar, menyembunyikan elemen teks, memadam kandungan teks, dan akhirnya memaparkan elemen gambar mengikut perubahan ketelusan.

4. Kod lengkap

Akhir sekali, kami menyepadukan tiga aspek kod di atas untuk membentuk fail HTML yang lengkap. Kodnya adalah seperti berikut:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现文字变照片</title>
  <style>
    .text {
      position: relative;
      z-index: 1;
    }

    .image {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0;
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('.text').mouseover(function() {
        $(this).addClass('active');
      }).mouseout(function() {
        $(this).removeClass('active');
      });
      
      $('.text.active').each(function() {
        var text = $(this).text();
        var image = $(this).next('.image');
        var opacity = 0;
        var timer = setInterval(function() {
          $(this).css('opacity', opacity);
          opacity += 0.1;
          if (opacity >= 1) {
            clearInterval(timer);
            $(this).text('');
            $(this).prev('.text').hide();
          }
        }.bind(image), 50);
      });
    });
  </script>
</head>
<body>
  <p class="text">这是一段需要替换的文字。</p>
  <img class="image lazy"  src="/static/imghwm/default1.png"  data-src="image.jpg"  alt="这是一张图片。"   style="max-width:90%">
</body>
</html>

Fail HTML ini merangkumi tiga bahagian: menetapkan struktur HTML, mereka bentuk gaya CSS dan menulis skrip jQuery, yang boleh mencapai kesan menukar teks kepada foto.

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan jQuery untuk mencapai kesan menukar teks kepada foto. Dengan pratetap struktur HTML, mereka bentuk gaya CSS dan menulis skrip jQuery, kami boleh mencapai kesan ini dengan cepat, sekali gus meningkatkan daya tarikan halaman dan pengalaman pengguna. Pada masa yang sama, ini juga menunjukkan kelebihan jQuery dalam operasi DOM dan kesan dinamik.

Atas ialah kandungan terperinci jquery menukar teks menjadi foto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!