Bagaimana untuk mencapai kesan pantulan gambar dalam air dengan jquery

Dengan perkembangan berterusan teknologi Internet, tahap reka bentuk web semakin tinggi dan semakin banyak kesan khas dan kesan animasi digunakan pada reka bentuk web. Antaranya, kesan pantulan dalam air adalah kesan yang sangat popular. Ia boleh menjadikan gambar biasa lebih menarik dan menarik, dan menjadikan halaman web lebih jelas. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan pantulan gambar dalam air.

1. Idea untuk pelaksanaan kesan

Mari kita lihat dahulu idea untuk merealisasikan kesan pantulan dalam air:

1 Dalam halaman HTML, gunakan bekas div untuk mengandungi dua sub- Elemen: elemen gambar dan elemen div kosong, yang terakhir digunakan untuk memaparkan pantulan air.
2. Gunakan gaya CSS untuk menetapkan gaya bekas dan sub-elemen, dan tetapkan kedudukan, indeks-z dan atribut lain untuk menjadikan gambar dan elemen pantulan dalam air bertindih.
3. Gunakan jQuery untuk mengendalikan elemen DOM, terbalikkan elemen gambar, dan kemudian tambahkannya pada elemen pantulan air.
4. Dengan menetapkan kelegapan, penapis dan gaya lain elemen pantulan air, ia boleh memaparkan kesan pantulan air.

2. Langkah pelaksanaan khusus

Sebelum memulakan pelaksanaan, kod sampel diberikan untuk rujukan anda. Kod HTML adalah seperti berikut:

<div class="wrap">
  <img src="image.jpg" alt="">
  <div class="mirror"></div>
</div>

Kod CSS adalah seperti berikut:

.wrap {
  position: relative;
  width: 400px;
  height: 300px;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.mirror {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  background: url(image.jpg) no-repeat;
  background-size: cover;
}

Kod jQuery adalah seperti berikut:

var mirror=$('.mirror');
var img=$('img').clone().css({
  'transform':'rotateX(180deg)',
  '-webkit-transform':'rotateX(180deg)',
  'opacity':'0.7',
  'filter':'alpha(opacity=70) blur(2px)'
});
mirror.append(img);

Seterusnya, kami akan memperkenalkan langkah pelaksanaan khusus secara terperinci :

1 Mula-mula, buat bekas div dalam kod HTML untuk mengandungi elemen imej dan elemen pantulan air. Di dalam bekas, cipta elemen img dan elemen div untuk memaparkan gambar dan pantulan air masing-masing Kelas elemen pantulan air ialah cermin.

2 Seterusnya, tetapkan gaya kontena dan elemen anak melalui gaya CSS. Bekas perlu menetapkan kedudukan: atribut relatif, lebar dan tinggi untuk memudahkan kedudukan elemen kanak-kanak. Elemen img perlu menetapkan kedudukan: atribut mutlak, jarak antara kiri dan atas, dan nilai indeks-z untuk tindanan kedudukan dengan elemen pantulan dalam air. Elemen cermin juga perlu menetapkan kedudukan: atribut mutlak, jarak antara kiri dan bawah, dan atribut z-index untuk paparan di bawah elemen img.

3 Kemudian, kami memanipulasi elemen DOM melalui jQuery. Mula-mula, tentukan cermin pembolehubah untuk mewakili elemen pantulan dalam air, dan tentukan img pembolehubah untuk mewakili imej yang disalin. Gunakan kaedah klon() untuk mengklon elemen img dan tetapkan gaya elemen img. Nota: Elemen img perlu diterbalikkan di sini untuk memberikan kesan cermin. Pelaksanaan khusus adalah menggunakan atribut transform untuk memutar dan menetapkan nilai rotateXnya kepada 180 darjah.

4. Tambahkan elemen img terbalik pada elemen cermin, dan tetapkan gaya kelegapan dan penapis untuk menjadikan gambar menunjukkan kesan pantulan dalam air. Tetapkan nilai atribut kelegapan kepada 0.7, yang bermaksud menetapkan kelegapan unsur pantulan dalam air kepada 70%. Gunakan penapis alfa charset=utf-8 untuk menetapkan ketelusan elemen dan gunakan penapis kabur untuk menetapkan kabur unsur.

3. Paparan kesan

Dengan melaksanakan langkah di atas, kita boleh menambah kesan pantulan air imej pada halaman web untuk menjadikan halaman lebih jelas dan menarik. Berikut ialah tangkapan skrin yang menunjukkan kesan:

Seperti yang ditunjukkan dalam gambar, kesan pantulan dalam air gambar adalah sangat realistik, menjadikan kesan halaman web lebih baik. Dengan menggunakan kaedah operasi DOM jQuery, anda bukan sahaja boleh mencapai kesan pantulan gambar dalam air, tetapi juga menerapkannya pada kesan khas gambar lain, yang merupakan salah satu kemahiran yang diperlukan untuk pembangun bahagian hadapan.

4. Ringkasan

Artikel ini memperkenalkan langkah pelaksanaan khusus tentang cara menggunakan jQuery untuk mencapai kesan pantulan dalam air dalam gambar. Melalui pelaksanaan langkah-langkah di atas, kita boleh menambah kesan pantulan air gambar pada halaman web dengan sangat mudah dan cepat, menjadikan halaman web lebih jelas dan menarik. Pada masa yang sama, menguasai kemahiran operasi DOM jQuery juga sangat penting kepada pembangun bahagian hadapan. Saya harap pembaca dapat mempelajarinya dengan teliti.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pantulan gambar dalam air dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!