Vorwort: Vor zwei Tagen suchte ich online nach Komponenten und entdeckte versehentlich die "Slotmachine -Komponente" unseres Kinderkonsole -Effekts. Nach dem Durchsuchen erinnert es die Erinnerungen meiner Kindheit.
Nehmen wir Sie mit, um sich eine so magische Komponente zu werfen - Slotmachine.
1. Komponentenvorschau
Lassen Sie uns zuerst einen einfachen Effekt erzielen
Denken Sie, es ist zu einfach? Mach dir keine Sorgen, gute Show kommt zuerst dein Glück.
Was? Noch nicht den gewünschten Effekt erzielen, gut! Im Folgenden wird der eigentliche Effekt veröffentlicht.
Ich habe lange geklickt, aber den Preis nicht gewonnen. Kein Wunder, dass ich als Kind nicht gewinnen konnte. Ich glaube nicht an das Böse, klicke weiter und starte und habe schließlich einmal den Preis gewonnen. Es ist wirklich nicht einfach.
Und unsere Ergebnisse für die Lotterie zum Jahresende beginnen! stoppen!
2. Code Beispiele
Da es sich um eine JS -Komponente handelt, müssen Sie zuerst die Komponentenbibliothek herunterladen. Erstens posten Sie die Open Source -Adresse
Schauen wir uns dann die Referenz der Datei an:
Die Codekopie lautet wie folgt: <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" Integrity = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDDDJZLEGXHJVME1FGJWPGMKZS7" CROCKINIGIN = "Anonymous">
<link href = "~/content/jQuery-slotmachine-master/dist/jQuery.slotmachine.css" rel = "StylesSheet"/>
<link href = "~/content/jQuery-slotmachine-master/css/style.css" rel = "stylesheet"/>
<link href = "~/content/toastr/toastr.min.css" rel = "Stylesheet"/>
<script type = "text/javaScript" src = "// code.jquery.com/jquery-2.1.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin = "anonymous"> </script>
<script src = "~/content/jQuery-slotmachine-master/dist/jquery.slotmachine.js"> </script>
<script src = "~/content/toastr/toastr.min.js"> </script>
Ein paar Punkte hier zu beachten:
1) Zitat JQuery und Bootstrap werden beide durch CDN -Beschleunigung verwiesen. Wenn Sie die CDN -Beschleunigung nicht verstehen, können Sie Baidu.
2) Die JQuery -Komponente muss von JQuery 2.0 oder höher unterstützt werden. Wenn die Version zu niedrig ist, gibt es JS -Ausnahmen.
3) Die Bootstrap -Komponente ist nicht erforderlich, aber für dieses Layout ist eine Unterstützung für Bootstrap -Stil erforderlich.
4) Die Toastr -Komponente ist nicht erforderlich, sie wird verwendet, um die Gewinnergebnisse hier anzuzeigen.
1. Versuchen Sie den Luck Effect -Code
HTML -Teil
<div id = "triky"> <div style = "text-align: center"> <h1> Bitte wählen Sie das Food, das Sie möchten. src = "/content/jQuery-Slotmachine-master/img/food2.jpg"/> </div> <div> <img src = "/content/jQuery-Slotmachine-master/img/food2.jpg"/> </div> <img Src = content/jquery-slotMachine/iMg/food./jquery/jquery-slotMachine/master/iMg/food "/content/jquery-slotMachine/master/iMg/food"/content/jquery-slotMachine/master/iMg/food "/content/jk. </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>
JS Teil
$ (function () {// Versuchen Sie Luck var triky = $ ("#Triky1"). Slotmachine ({aktiv: 2, // Der Index des Elements, der während der Initialisierung angezeigt wird // Verzögerung: 150, // Wechseln Sie die Intervallzeit zwischen zwei Bildern (Millisekundeneinheiten) // -Funktion: Funktion (). $ ("#TrikyShuffle"). Click (function () {Triky.Shuffle (8); // Die Rotationsmethode starten, Parameter 8 bedeutet, dass 8 Symbole jede Rotation übersprungen werden});Detaillierte Erklärung der gemeinsamen JS -Eigenschaften, -Methoden und -ereignisse
(1) Initialisierungsmethode var machine = $ ("#id"). Slotmachine ({}); Gibt das aktuell gedrehte Objekt zurück. Die initialisierten Parameter werden beispielsweise in der SlotMachine () -Methode übergeben
Aktiv: Zeigt den Index des angezeigten Elements während der Initialisierung ab 0 an
Verzögerung: Wechseln Sie die Intervallzeit zwischen zwei Bildern (Millisekunden -Einheiten)
Auto: Ob automatisch gedreht werden, der Wert ist wahr oder falsch
Drehungen: Wenn das Auto wahr ist, ist dies die Anzahl der Symbole, die jedes Mal übersprungen werden
STOPHIDDEN: Ob die Animation am Anfang und der Stopp auftritt, wenn die Animation auftritt
Randomize: Funktion (ActiveLementIndex) {} Diese Eigenschaft repräsentiert den Index des ausgewählten Wertes nach jeder Rotation (ab 0)
Richtung: Die Richtung der Animation, Wert (nach oben)
(2) Gemeinsame Methoden
machine.shuffle (wiederholen, onStopcallback); Zeigt den Rotationsbeginn an, Wiederholung zeigt die Anzahl der Bilder an, die jedes Mal übersprungen sind. OnStopCallback gibt die Ereignis -Rückrufmethode nach Stopp der Rotation an.
machine.prev (); Gibt das vorherige Element zurück
machine.next (); Gibt das nächste Element zurück
machine.stop (); Rotation stoppen
maschinell.aktiv; Ruft den Index des ausgewählten Elements ab
Maschine.Running; erkennt, ob es dreht, wahr, dass es sich um dreht
maschinell.stopping; Erkennung, ob es aufgehört hat
machine.destroy (); zerstört den Rotationsknoten
2. Einfacher Beispiel für Spielkonsole -Effekt -Code
HTML -Teil
<div id = "randomize"> <div style = "text-align: center; max-width: 900px;"> <h1> Einfache Spielekonsole </h1> <div> <div> <div> <div> <div id = "machine1"> <div> <img Src = "/content/jquery-slotMachine/iMg/img/img/img/img/img/img/img/img/img/flott/FLOT1.PNG"/jquery-slotmachine/img/img/img/img/flott1.png "/jquery-slotMachine/img/img/img/img/fLOT1.png"/jquery-SlotMach. src = "/content/jQuery-slotMachine-master/img/Slot2.png"/> </div> <div> <img src = "/content/jQuery-SlotMachine-master/img/slot3.png"/> </</div> <img src = "/content/jQuery-SlotMach/master/src ="/content/jquery-slotMachine/src = "/content/jquery-slotMachine/src ="/content/jquery-slotMachine/src = "/content/jquery-slotMachine/src ="/content/jquery-slotMach. /> </div> <div> <img src = "/content/jQuery-slotmaachine-master/img/slot5.png"/> </div> <img src = "/content/jQuery-slotmachine-master/img/slot6. <div> <img src = "/content/jQuery-slotmaachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </> <div> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img src = "/content/jQuery-SlotMachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jQuery-SlotMachine-master/img/slot4.png"/> </</div> <img src = "/content/jQuery-SlotMach/master/src ="/content/jquery-slotMach. /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div id="machine3"> <div> <img src = "/content/jQuery-slotmaachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot2.png"/> </> <div> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img> <img src = "/content/jQuery-SlotMachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jQuery-SlotMachine-master/img/slot4.png"/> </</div> <img src = "/content/jQuery-SlotMach/master/src ="/content/jquery-slotMach. /> </div> <div> <img src = "/content/jQuery-Slotmachine-master/img/SOT6.png"/> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </divomizeButton "type" usw. "> </divum =" ranomizeButton "type") type = "usw. </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
JS Teil
$ (function () {// Einfache Spielekonsole var machine1 = $ ("#machine1"). var arr = []; arr [1] || OnComplete);3. Beispiel für ein Stop -Effekt -Code -Beispiel
HTML -Teil
<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> <div> </div> </div> </div> </div> <div> </div> <div> </div> <div> </div> </div> <div> <div> <div> </gruppe " type = "button"> stop </div> </div> </div> </div> </div> <div> </div> </div>
JS Teil
$ (function () {// Single Stop var machine4 = $ ("#casino1"). $ ("#SlotMachinButtonShuffle"). Click (function () {gestartet = 3; machine4.shuffle (); machine5.shuffle (); machine6.shuffle ();}); machine6.Stop ();3. Zusammenfassung
Der gesamte Prozess ist nicht kompliziert. Alle Eigenschaften, Ereignisse und Methoden können durch Lesen der Dokumentation leicht verstanden und angewendet werden. Über den Demonstrationscode gibt es nichts zu sagen. Sie können es auf den ersten Blick verstehen. Ich hoffe, es wird für alle hilfreich sein, JavaScript -Komponenten zu lernen.