Bagaimana Membuat Kesan Zum Imej pada CSS tulen
CSS tidak mempunyai pseudoclass untuk menyasarkan acara klik, dan ini merupakan salah satu daripada mata kesakitan yang paling besar pemaju front-end. Kelas pseudo yang paling dekat adalah : aktif
yang menstabilkan elemen untuk tempoh masa pengguna menekan butang tetikus di atasnya.
Kesan ini bagaimanapun berpanjangan: apabila pengguna melepaskan tetikus, : aktif
tidak berfungsi lagi. Kita perlu mencari jalan lain emulate acara klik di CSS.
Jawatan ini telah ditulis sebagai tindak balas kepada permintaan pembaca, dan ia akan menjelaskan cara untuk target acara klik dengan CSS tulen dalam kes penggunaan khusus, zum imej.
Anda dapat melihat hasil akhir di bawah ini - satu-satunya penyelesaian CSS untuk zoom gambar pada klik.
Kapan Menggunakan Penyelesaian CSS-Sahaja
Sebelum saya meneruskan, saya ingin mengatakan bahawa untuk zoom imej saya cadangkan kaedah CSS-satunya (yang mengubah dimensi imej), hanya apabila anda mahu tunggal atau a kumpulan beberapa imej untuk mempunyai ciri zum.
Untuk betul galeri, JavaScript menyediakan lebih banyak fleksibiliti dan kecekapan.
Teknik Penghujung yang Kami Gunakan
Sekarang bahawa anda telah diberi amaran, mari cepat-cepat lihat 3 teknik utama kami akan menggunakan:
- The
Tag HTML yang membolehkan penyemak imbas mewujudkan kawasan yang boleh dihubungkan melalui imej. Baca lebih lanjut mengenai
elemen dalam jawatan saya yang terdahulu.
- The
usemap
sifat daritag, yang menghubungkan imej ke peta imej.
- The
: sasaran
CSS pseudo-class yang mewakili elemen yang telah disasarkan menggunakan pemilih ID.
1. Buat Pangkalan HTML
Pertama, mari kita buat asas HTML. Dalam kod di bawah, kami tambah imej yang akan dizoom dan diperluaskan & ikon butang tutup untuk zum masuk dan keluar.
Adalah penting untuk mempunyai ID pada imej untuk dizoom, dan butang Tutup perlu menjadi pautan yang mempunyai href = "#"
atribut, saya akan menerangkan mengapa di kemudian hari.
2. Tambah CSS
Pada mulanya, ikon Tutup tidak boleh dipaparkan. The kedudukan
, margin-
, ditinggalkan
, dan bawah
hartanah tempat yang Buka dan Tutup ikon di mana kita mahu mereka berada di sudut kanan atas imej.
The penunjuk: tidak ada;
peraturan membolehkan acara tetikus lulus ikon Expand dan mencapai imej.
.img ketinggian: 150px; lebar: 200px; .close background-image: url ("Close-icon.png"); ulangi latar belakang: tidak ulangi; bawah: 418px; paparan: tiada; ketinggian: 32px; kiri: 462px; margin-top: -32px; kedudukan: relatif; lebar: 32px; .expand bottom: 125px; margin-left: -32px; margin-right: 16px; penunjuk: tidak ada; kedudukan: relatif;
3. Tambah Peta Imej
Pada peta imej, yang kawasan yang boleh diklik sepatutnya di sudut kanan atas dari imej tepat di bawah ikon Kembangkan, dan mengenai saiznya. Letakkan elemen sebelum yang pertama
tag dalam HTML. Kami akan mengikat imej ke peta dalam langkah seterusnya.
Dalam blok kod di atas, tag mentakrifkan bentuk, saiz, dan URI kawasan yang boleh dikaitkan di dalam peta imej. Untuk bentuk segi empat tepat, yang
bentuk
atribut mengambil rect
nilai, dan empat nilai daripada coords
atribut mewakili jarak dalam piksel di antara:
- tepi kiri imej & tepi kiri kawasan pautan
- pinggir atas imej & tepi atas kawasan pautan
- tepi kiri imej & tepi kanan kawasan pautan
- pinggir atas imej & tepi bawah kawasan pautan
Nilai href
atribut harus menjadi pengenal hash gambar (inilah sebab mengapa imej harus mempunyai ID
).
4. Mengikat imej ke Peta Imej
Tambah usemap
atribut kepada imej supaya mengikatnya ke peta imej. Nilainya perlu menjadi perwakilan hash daripada nama
sifat dari tag kami menambah dalam Langkah 3.
Kawasan klik imej yang dapat diklik sekarang terletak di belakang butang Expand. Apabila pengguna mengklik butang Kembangkan, ia adalah kawasan yang boleh diklik yang diklik dalam realiti - ingat bahawa kami membuat butang Kembangkan “boleh dilalui” dengan penunjuk: tidak ada;
memerintah dalam Langkah 2.
Dengan cara ini pengguna mensasarkan imej itu sendiri dengan mengkliknya, dan selepas klik, URI akan disekat dengan "# img1"
pengecam pecahan.
5. Gaya : sasaran
Pseudo-Class
Sehingga "# img1"
pengenal fragmen adalah pada akhir URI, imej yang ditargetkan boleh digayakan dengan : sasaran
pseudo-class
Dimensi peningkatan imej yang disasarkan, butang Tutup akan ditunjukkan, dan butang Expand tersembunyi.
.img: target height: 450px; lebar: 500px; .img: target + .close display: block; .img: target + .close + .expand display: none;
Bagaimana Tali Tutup berfungsi
Sebagai butang Tutup ditambah sebagai imej latar belakang (Langkah 2), dan sebenarnya adalah tag dengan
href = #
atribut (Langkah 1), apabila ia diklik, ia akan menghapus pengenal fragmen dari akhir URI. Oleh itu ia juga membuangnya : sasaran
pseudo-class dari imej, dan imej kembali ke saiz sebelumnya.
Kini, kesan zoom-on-klik CSS dilakukan, lihat demo di bawah ini atau baca lebih sedikit mengenai teori di belakang peta imej di bahagian seterusnya.
Maklumat Latar Belakang: Mengapa
dan tidak
?
Sekarang, anda pasti memahami bahawa perkara yang paling penting untuk penyelesaian CSS-satunya ini untuk bekerja adalah sasarkan imej menggunakan href = "# imgid"
atribut, yang juga boleh dilakukan dengan menggunakan tag bukan peta imej.
Ini mungkin benar, bagaimanapun apabila ia datang kepada imej, menggunakan elemen lebih sesuai. Lebih penting lagi apabila anda mahu zoom berlaku apabila mengklik pada kawasan yang lebih besar pada imej bukan hanya pada ikon Kembangkan,
memberikan anda penyelesaian yang mudah.
The lalai
nilai untuk bentuk
atribut mencipta a kawasan pautan segi empat tepat yang meliputi keseluruhan imej. Sekiranya anda menggunakannya Sebaliknya, anda perlu memasukkannya untuk menutup imej, dan anda juga perlu menggunakan elemen pembalut untuk tujuan yang sama.
Untuk juga bercakap tentang kaveat penyelesaian ini, penunjuk peristiwa
Hartanah CSS (kami digunakan dalam Langkah 2) disokong oleh Internet Explorer hanya dari versi 11.
Untuk menyokong penyemak imbas IE sebelum itu, anda mungkin mahu menggunakannya bukannya
, atau mempunyai imej yang dizumkan dengan mengklik mana-mana sahaja di dalamnya (dalam hal ini tidak akan ada keperluan bagi ikon Kembangkan).