jquery tetikus ke atas imej untuk membalikkan teks

Dengan pembangunan halaman web, kesan dinamik telah menjadi bahagian penting dalam reka bentuk, dan antara kesan ini, kesan imej dan teks yang muncul secara berselang-seli adalah perkara biasa. Artikel ini memperkenalkan kaedah pelaksanaan berasaskan jQuery untuk membalikkan teks pada imej atas tetikus.

1. Prinsip Pelaksanaan

Letakkan gambar dan teks dalam bekas elemen yang sama, dan wujudkan paparan ganti gambar dan teks dengan mengawal gaya CSS. Apabila tetikus melayang, jqury digunakan untuk membalikkan imej dan teks dalam bekas dan mengubah suai gaya CSS untuk mencapai kesan dinamik.

2. Langkah pelaksanaan

1. Buat struktur HTML

Pertama, buat bekas HTML yang mengandungi imej dan teks:

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

2 , pelarasan gaya CSS

Tetapkan gaya bekas kepada kedudukan relatif, tetapkan imej dan gaya teks kepada kedudukan mutlak dan kawal keutamaan paparan melalui atribut indeks-z. Kodnya adalah seperti berikut:

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

3. Untuk mencapai kesan penyongsangan

Apabila tetikus kekal pada bekas, imej dan teks diterbalikkan, ketelusan imej dikurangkan, dan ketelusan teks meningkat. Untuk mencapai kesan ini melalui jQuery, kodnya adalah seperti berikut:

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

4. Kesan akhir

Kod lengkap adalah seperti berikut:

<div class="pic-box">
  <img src="/static/imghw/default1.png"  data-src="图片地址"  class="lazy" alt="">
  <div class="text">文字内容</div>
</div>

.pic-box {
  position: relative;
}
.pic-box img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.pic-box .text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: .3s ease;
}

$(".pic-box").hover(function () {
  $(this).find("img").stop().fadeOut(300);
  $(this).find(".text").stop().animate({"opacity": 1}, 300);
}, function () {
  $(this).find("img").stop().fadeIn(300);
  $(this).find(".text").stop().animate({"opacity": 0}, 300);
})

Kesan adalah seperti yang ditunjukkan dalam gambar:

3. Ringkasan

Artikel ini memperkenalkan kaedah berasaskan jQuery untuk membalikkan teks apabila tetikus melalui imej dicapai dengan mengawal gaya CSS dan pelarasan dinamik jQuery. Ini ialah kaedah pelaksanaan biasa untuk menggabungkan gambar dan teks, yang boleh digunakan pada pelbagai reka bentuk web.

Atas ialah kandungan terperinci jquery tetikus ke atas imej untuk membalikkan teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!