Pendahuluan: Dua hari yang lalu, saya mencari komponen online dan secara tidak sengaja menemukan "komponen slotmachine" dari efek konsol game masa kecil kami. Setelah menjelajahinya, itu membangkitkan kenangan masa kecil saya.
Mari kita bawa Anda untuk melihat komponen magis seperti itu - slotmachine.
1. Pratinjau Komponen
Mari kita dapatkan efek sederhana terlebih dahulu
Pikirkan itu terlalu sederhana? Jangan khawatir, pertunjukan yang bagus akan datang, cobalah keberuntungan Anda terlebih dahulu.
Apa? Belum mencapai efek yang diinginkan, bagus! Di bawah ini, efek sebenarnya akan dirilis.
Saya mengklik untuk waktu yang lama, tetapi saya tidak memenangkan hadiah. Tidak heran saya tidak bisa menang ketika saya masih kecil. Saya tidak percaya pada kejahatan, terus klik dan mulai, dan akhirnya memenangkan hadiah sekali. Ini benar -benar tidak mudah.
Dan hasil lotere akhir tahun kami, mulai! berhenti!
2. Contoh kode
Karena ini adalah komponen JS, Anda harus terlebih dahulu mengunduh pustaka komponen. Posting pertama alamat open source
Lalu mari kita lihat referensi file:
Salinan kode adalah sebagai berikut: <tautan rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/boottrap.min.css" Integrity = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDDJZLPLEGXHJVME1FGJWPGMKZS7" Crossorigin = "Anonymous">
<tautan href = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.css" rel = "stylesheet"/>
<tautan href = "~/content/jQuery-slotmachine-master/css/style.css" rel = "stylesheet"/>
<tautan href = "~/content/toastr/toastr.min.css" rel = "stylesheet"/>
<script type = "text/javascript" src = "// code.jquery.com/jquery-2.1.1.min.js"> </script>
<script src = "https://maxcdn.boottrapcdn.com/boottrap/3.3.6/js/boottrap.min.js" integrity = "sha384-0msbjdehialfmubbqp6a4qrprq5ovfw37pr3j5elqxs1a4qrprq5ovfw37pr3j5elqxs1a4qrprq5ovfw37pr3j5elqxs1a4qrprQ5ovfw37elqrqTs9elQXSNPOPSOPHSOPNAPNOPSNOPSNAPNOPSNAPNOPSNAPNAPOLQODSHPODS Crossorigin = "Anonymous"> </script>
<skrip src = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.js"> </script>
<skrip src = "~/content/toastr/toastr.min.js"> </script>
Beberapa poin yang perlu diperhatikan di sini:
1) Kutipan jQuery dan bootstrap keduanya dirujuk melalui akselerasi CDN. Jika Anda tidak memahami akselerasi CDN, Anda dapat Baidu.
2) Komponen jQuery harus didukung oleh jQuery 2.0 atau lebih. Jika versinya terlalu rendah, akan ada pengecualian JS.
3) Komponen bootstrap tidak diperlukan, tetapi tata letak ini memerlukan beberapa dukungan gaya bootstrap.
4) Komponen Toastr tidak diperlukan, digunakan untuk menampilkan hasil yang menang di sini.
1. Coba kode efek keberuntungan
bagian html
<Div id = "triky"> <div style = "text-align: center"> <h1> Pilih makanan yang Anda inginkan </h1> <v div style = "margin: auto;"> <div id = "triky1"> <v> <img src = "/content/jQuery-slotmachine/iMg/iMg/cooke/cooke/content/content/jQuery-slotmachine/iMg/iMg/iMg/iMg/iMg. src = "/content/jQuery-slotmachine-master/img/food2.jpg"/> </div> <verv> <img src = "/content/jQuery-slotmachine-master/img/food2.jpg"/> <div> <v> <img src = "/content/jQuer/jQuer/JQuer/JQACH/JQUACH/JQUACH/JQUACH/JQACH/JQACH/JQACH/JQACH/JQURE/JQURE/JQURE/ </div> <div> <div style="margin-left:-15px" role="group"> <div id="trikyShuffle" type="button"> Try luck</div> </div> </div> </div> </div> </div> </div> </div> </div> <div></div> </div> </div> </div> <div></div> </div>
Bagian JS
$ (function () {// coba keberuntungan var triky = $ ("#triky1"). slotmachine ({aktif: 2, // indeks item yang ditampilkan selama inisialisasi // penundaan: 150, // alihkan waktu interval antara dua gambar (milliseconds unit) // mengacak: function () {// return 0;//putar (milliseconds unit) // acak: function () {// return 0; $ ("#trikyshuffle"). Klik (function () {triky.shuffle (8); // Mulai metode rotasi, parameter 8 berarti bahwa 8 ikon dilewati setiap rotasi});Penjelasan terperinci tentang sifat, metode, dan peristiwa JS umum
(1) metode inisialisasi var mesin = $ ("#id"). Slotmachine ({}); Mengembalikan objek yang saat ini diputar. Parameter yang diinisialisasi dilewatkan dalam metode slotmachine (), misalnya
Aktif: Menunjukkan indeks item yang ditampilkan selama inisialisasi, mulai dari 0
Delay: Ganti waktu interval antara dua gambar (unit milidetik)
Otomatis: Apakah akan berputar secara otomatis, nilainya benar atau salah
Berpintu: Saat otomatis benar, ini adalah jumlah ikon yang dilewati setiap kali
berhenti: apakah animasi di awal dan berhenti terjadi ketika animasi terjadi
Randomize: Function (ActiveElementIndex) {} Properti ini mewakili indeks nilai yang dipilih setelah setiap rotasi (mulai dari 0)
Arah: Arah animasi, nilai (naik || turun)
(2) Metode umum
mesin.shuffle (ulangi, ontopcallback); menunjukkan awal rotasi, ulangi menunjukkan jumlah gambar yang dilewati setiap kali; OnStopCallback menunjukkan metode panggilan balik acara setelah rotasi berhenti.
mesin.prev (); Mengembalikan elemen sebelumnya
mesin.next (); Mengembalikan elemen berikutnya
mesin.stop (); Hentikan rotasi
mesin. Aktif; Mendapat indeks elemen yang dipilih
mesin.running; Mendeteksi apakah itu berputar, benar berarti itu berputar
mesin. Deteksi apakah itu telah berhenti
mesin.destroy (); menghancurkan node rotasi
2. Contoh Kode Efek Konsol Game Sederhana
bagian html
<Div id = "acak"> <div style = "text-align: center; max-width: 900px;"> <h1> konsol game sederhana </h1> <viv> <viv> <viv> <veR> <v id = "Machine1" <v> <mmg slot1/content/content/jQuery-slotmachine-master/iMg/iMg/slot1/content/content/jQuery-slotmachine src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </Div> <div> <img src = "/content/jquerym-slot/jquery/slot-slot/slot-slot/slot/slot/slot-slot/slot/slot-slot/slot-slot-slot /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot5.png"/> </div> <dv> <img src = "/konten/jQuery-slotmachine-master/img/slot6.png"/</div> </div> </div> </slot6.png "//</div> </div> </div> </slot6.png"//</Div> </Div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </Div> <Div> src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot4.png"/> </Div> <div> <img src = "/content" slotm "/jquer/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot-slot-slot /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot5.png"/> </div> <dv> <img src = "/konten/jQuery-slotmachine-master/img/slot6.png"/</div> </div> </div> </slot6.png "//</div> </div> </div> </slot6.png"//</div> </div> </div> </slot6.png "//</div> </Div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </Div> <Div> src = "/content/jQuery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot4.png"/> </Div> <div> <img src = "/content" slotm "/jquer/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot/slot-slot-slot-slot /> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot6.png"/> </div> </div> </div> </div> </div> </div> </div> <Div> <v> <Div Role = "Group"> </Div> </Div> <Div> <Div> <Div Role = "Group"> </Div> </Div> <Div> <d Div> <Div Role = "Group"> <Div ID = "RAN" " </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div> </Div>
Bagian JS
$ (function () {// konsol game sederhana var machine1 = $ ("#machine1"). slotmachine ({aktif: 0, tunda: 500}); var machine2 = $ ("#machine2"). slotmachine ({aktif: 1, tunda: 500, arah: 'bawah'}); var machine3 = $ $ ("#) (200) (SLOT) (SLOT) (SLOT ('{{Machine3) ({{{100 {{200) (ACTIF: {200 {{{200 {{{var Machine) ({{var Machine (" var arr =]; ARR [1] || OnComplete);3. Contoh kode efek stop tunggal
Bagian html
<div id="casino" style="padding-top:50px;"> <div> <h1>Raffle</h1> <div> <div id="casino1" style="margin-left: -65px;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <Div> </div> <div> </div> <biv> </div> <div> </div> <div> </div> <viv> </div> <viv> </div> <v div> </div> <ver> </div> </div> type = "group"> <v ID = "slotmachineButton" type = "group"> <"slotmachine iDShuffuffle" slotmachuxhuffle "slotmachuFLuFLUFFLUFFUFFLUFFUFFLUFFUFFLUFTE" SLOTMOCHUFFUFFLUFFUFFLUFTE " type = "Tombol"> Hentikan </div> </div> </div> </div> </div> <div> </div> </div>
Bagian JS
$ (function () {// single stop var machine4 = $ ("#casino1"). slotmachine ({aktif: 0, tunda: 500}); var machine5 = $ ("#casino2"). SlotMachine ({Active: 1, Delay: 550}); Machine6 = $ ("#Casino3"). Slotm; $ ("#SlotMachineButtonShuffle"). Klik (function () {start = 3; Machine4.shuffle (); Machine5.shuffle (); Machine6.shuffle ();}); Machine6.Stop ();3. Ringkasan
Seluruh proses tidak rumit. Semua properti, peristiwa, dan metode dapat dipahami dan diterapkan dengan mudah dengan membaca dokumentasi. Tidak ada yang bisa dikatakan tentang kode demonstrasi. Anda bisa memahaminya secara pertama. Saya berharap akan sangat membantu bagi semua orang untuk mempelajari komponen JavaScript.