javascript - Bagaimana untuk melaksanakan imej bahagian hadapan dalam artikel Klik untuk muncul untuk membesarkan, kemudian klik untuk menarik balik.

Question

Dalam projek baru-baru ini, terdapat artikel yang diterbitkan oleh ahli Apabila ilustrasi artikel itu dipaparkan pada telefon bimbit, kadangkala anda perlu mengezum masuk untuk melihatnya, dan anda tidak boleh mengklik untuk membesarkan.

Satu-satunya perkara yang boleh dikendalikan di sini ialah tag img.

$("img").klik(fungsi(){

$(this).wrap('<a href='+$(this)[0].src+'></a>')

})

Tambah tag href ke img dan tulis laluan img, gambar akan muncul, tetapi tiada cara untuk kembali, sila selesaikan

Sama seperti gambar yang ditunjukkan, bagaimana untuk melaksanakan bahagian hadapan atau pemalam ini!

Answer 1

Klik pada imej untuk mencipta lapisan topeng baharu Src imej dalam lapisan topeng adalah sama dengan src sasaran yang anda klik

.

Answer 2

Anda boleh melihat pemalam jquery untuk kesan imej. Perkenalkan terus ke dalam projek anda, kemudian lakukan beberapa konfigurasi, dan ia akan dilaksanakan.
Suka kesan ini: http://www.jq22.com/yanshi6536

Answer 3

Jika anda ingin mencapainya sendiri

Saya rasa apa yang anda maksudkan ialah selepas klik pada gambar, gambar itu dibalut dengan lapisan tag

Anda boleh mengubah pemikiran anda

Gunakan location.href untuk melompat selepas mengklik Ini memudahkan untuk menilai sama ada untuk melompat atau kembali dalam js

Gambar besar selepas muncul mempunyai latar belakang hitam, yang paling mudah difahami oleh pengguna, sebenarnya, pengguna boleh mengklik latar belakang hitam untuk kembali

Hubungan hierarki antara latar belakang dan img telah diwujudkan. Gunakan acara.sasaran untuk menentukan sama ada imej yang diklik ialah gambar atau latar belakang hitam

Tentukan sama ada untuk melompat atau kembali

Answer 4

Anda bercakap tentang pemalam jenis ini http://refined-x.com/Flow-UI/...

Answer 5

Saya belum menulis tentang versi mudah alih, tetapi saya telah menulis tentang kesan yang serupa pada versi PC.
Caranya ialah dengan menambah lapisan topeng, yang biasanya tersembunyi. Apabila imej diklik, togol lapisan topeng (), dan kemudian memberikan atribut src imej kepada img lapisan topeng.
Sudah tentu, anda perlu menetapkan gaya img lapisan topeng, seperti: lebar maks, ketinggian maks, berpusat, dsb.
Akhir sekali, paras lapisan topeng hendaklah paling tinggi.