Plugin jQuery ZooMove untuk Zum Imej di Hover
Sekiranya anda pernah melayari tapak e-dagang yang anda mungkin lihat kesan zum imej. Anda mengarahkan foto produk dan bahagian imej itu diperbesarkan untuk pandangan yang lebih jelas.
The Plugin ZooMove adalah cara yang bagus untuk meniru kesan ini di laman anda. Ia dikuasakan oleh jQuery, jadi anda boleh mendapatkan ini & berjalan dengan cepat tanpa banyak kod.
ZooMove adalah percuma dan sumber terbuka yang lengkap pada GitHub untuk mana-mana pemaju yang ingin tahu. Ia boleh dipasang melalui npm, Bower, Benang, atau dimuat turun secara langsung dari CDNJS.
Untuk menyediakan imej ZooMove, anda perlu tiga fail tertentu di tajuk halaman anda:
- jQuery
- ZooMove CSS
- ZooMove JS
Kedua-dua fail ZooMove boleh diminimumkan jika anda mahu muat halaman lebih cepat. Anda juga boleh menggabungkan fail CSS ke dalam lembaran gaya utama anda jika itu lebih mudah.
Semua sihir sebenar berlaku di HTML di mana anda boleh tetapkan HTML5 data- * atribut untuk kesan yang berbeza.
Ini membolehkan anda membina anda kesan zoom adat sendiri berdasarkan empat parameter berbeza:
skala data-zoo- mentakrifkan jumlah saiz zum semasa berlegar (mis. 2.0 untuk 200%)data-zoo-move- mentakrif sama ada imej bergerak bersama dengan kursordata-zoo-over- mentakrifkan imej yang dizoom muncul melebihi asalnyadata-zoo-kursor- mentakrifkan titik kursor
Parameter kelima terakhir membolehkan anda menentukan apa yang URL imej baharu harus (jika diperlukan).
Anda boleh menggunakan ZooMove di semua pelayar utama, termasuk IE9 +. Plugin ini ialah disokong secara meluas dan ia menawarkan satu pengalaman pengalaman pengguna.
Jika anda sedang mencari perpustakaan berlegar-ke-zum mudah ZooMove adalah pilihan yang sangat baik. Ia cukup ringan untuk berjalan di mana-mana laman web dan ia dikuasakan oleh jQuery, jadi anda tidak perlu menulis banyak kod untuk mendapatkannya berfungsi.
Lawati halaman utama untuk melihatnya dalam tindakan dan semak dokumentasi di GitHub untuk mengetahui lebih lanjut.
