5 Skrip Slider Perbandingan Imej Percuma
Slider overlaid membolehkan anda membuat perbandingan antara dua imej, biasanya jenis sebelum-akhir, dengan kedua-dua imej tersebut ditumpukan pada satu sama lain. Slider yang boleh dimanipulasi, boleh diseret oleh pengguna untuk menunjukkan kurang daripada imej sebelum dan lebih daripada imej selepas itu, dan sebaliknya.
Ini adalah cara yang sempurna untuk senario tertentu seperti melihat kesan buruk suasana Marikh atau bagaimana landskap bandar berubah lebih dari setengah abad.
Untuk pereka, ia juga merupakan cara yang baik untuk merenungkan jumlah perubahan teknik atau pendekatan pada imej asal. Terdapat pelbagai perpustakaan JS yang boleh anda gunakan untuk tujuan perbandingan. Berikut adalah 5 daripada mereka.
Twentytwenty
Twentytwenty adalah alat visual untuk memudahkan perhatikan perbezaan antara dua imej. Alat ini menggunakan jQuery dan jquery.event.move untuk berfungsi. Ia sangat mudah digunakan, hanya menumpuk dua imej ke dalam bekas, kemudian panggil twentytwenty (); untuk bekas.
Kemudian:
$ ("# kontena"). twentytwenty (); Twentytwenty adalah responsif dan berfungsi untuk semua peranti, dan jika anda menggunakan rangka kerja Yayasan, ini akan keluar dari kotak.
Juxtapose
Juxtapose membantu anda membandingkan dua keping media (foto atau GIF) dan memudahkan anda menyerlahkan perubahan antara imej dari masa ke masa. Plugin ini mudah digunakan dan berfungsi pada semua peranti. Hanya berikan dua imej kemudian panggil plugin dengan pilihan yang tersedia.
Pada pilihan, anda boleh menetapkan kedudukan permulaan slider, tetapkannya menegak atau mendatar, menambah label dan kredit, animasi dan banyak lagi.
Cuba demo di bawah:
imgSlider
imgSlider adalah plugin jQuery yang mudah untuk membuat slider perbandingan imej. Penggunaannya adalah mudah dan mudah: selepas memasukkan JS dan CSS, bungkus imej dalam div dengan ditinggalkan kelas untuk sebelum ini imej, dan betul kelas untuk selepas imej, kemudian aktifkannya dengan menelefon .slider ();. Pilihan plugin termasuk menetapkan kedudukan permulaan slider, dan menambah / menunjukkan arahan pada gelangsar.
Hubungi pemalam:
$ ('. slider'). slider (); 
Cocoen
Cocoen membolehkan sentuhan dengan penggunaan Acara Sentuh jQuery. Mudah untuk memohon kerana struktur HTML yang serupa dengan Twentytwenty pasangkan. Pada timbunan skrip, selain jQuery, anda perlu memasukkan pustaka Acara JQuery Touch, bersama plugin ini.
$ (document) .ready (function () $ ('. cocoen'). cocoen (););
Cuba demo di bawah:
Slider Perbandingan Imej
CodyHouse membuat demo slider perbandingan imej dengan CSS3, jQuery dan beberapa skrip untuk mengendalikan acara seret dan untuk menambah sokongan mudah alih. Anda boleh mengikuti penjelasan penuh dan arahan menggunakan plugin ini di sini dan lihat demo di sini.
Cuba demo di bawah:
Berikut adalah 3 lagi:
Cato - Plugin lain memerlukan jQuery sebagai kebergantungan tetapi Cato tidak memerlukan kebergantungan untuk bekerja, menjadikan perpustakaan lebih ringan untuk slider perbandingan imej. Penggunaannya mudah, hanya masukkan CSS dan JS perpustakaan Cato dan ikuti struktur HTMLnya.
Terdapat pilihan yang tersedia untuk digunakan pada gelangsar anda, termasuk menambah petua alat, menukar arah gelangsar, malah menambahkan kesan penapis seperti sepia dan skala kelabu. Walau bagaimanapun, anda perlu ambil perhatian bahawa Cato pada masa ini hanya mempunyai sokongan untuk WebKit.
Sebelum selepas - Ini ringan, responsif sepenuhnya, dan berfungsi pada susun atur dan saiz apa pun. Anda boleh melihat demo langsung di Codepen.
Slider Perbandingan Video HTML5 - Apabila pemaju lain cuba membuat slider perbandingan untuk imej, maka Dudley Storey menggunakan slider untuk video. Untuk membuat kerja, dia menggunakan jQuery dan hanya beberapa baris kod. Lihat demo di Codepen untuk melihat tindakan itu.
