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:

1. The Tag HTML yang membolehkan penyemak imbas mewujudkan kawasan yang boleh dihubungkan melalui imej. Baca lebih lanjut mengenai elemen dalam jawatan saya yang terdahulu.
2. The usemap sifat dari tag, yang menghubungkan imej ke peta imej.
3. 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:

1. tepi kiri imej & tepi kiri kawasan pautan
2. pinggir atas imej & tepi atas kawasan pautan
3. tepi kiri imej & tepi kanan kawasan pautan
4. 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.

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.

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 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).