Préface: Il y a deux jours, je cherchais des composants en ligne et j'ai découvert accidentellement la "composante Slotmachine" de notre effet de console de jeu d'enfance. Après l'avoir parcouru, cela évoque les souvenirs de mon enfance.
Voyons vous jeter un œil à une composante aussi magique - Slotmachine.
1. Aperçu des composants
Allons d'abord un effet simple
Vous pensez que c'est trop simple? Ne vous inquiétez pas, le bon spectacle arrive, tentez d'abord votre chance.
Quoi? Ne pas encore atteindre l'effet souhaité, bon! Ci-dessous, l'effet réel sera publié.
J'ai cliqué longtemps, mais je n'ai pas remporté le prix. Pas étonnant que je ne puisse pas gagner quand j'étais enfant. Je ne crois pas au mal, continue de cliquer et de commencer, et finalement remporté le prix une fois. Ce n'est vraiment pas facile.
Et nos résultats de loterie de fin d'année, commencez! arrêt!
2. Exemples de code
Puisqu'il s'agit d'un composant JS, vous devez d'abord télécharger la bibliothèque des composants. Postez d'abord l'adresse open source
Jetons ensuite un coup d'œil à la référence du fichier:
La copie de code est la suivante: <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" intégrity = "sha384-1q8mtjoasx8j1au + a5wdvnpi2lkffwweaa8hdddjzlplegxhjvme1fgjwpgmkzs7" crossorigin = "anonymous">
<link href = "~ / content / jQuery-Slotmachine-Master / Dist / jQuery.slotmachine.css" rel = "Stylesheet" />
<link href = "~ / contenu / jQuery-slotmachine-master / css / style.css" rel = "Stylesheet" />
<link href = "~ / contenu / 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.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin = "anonymous"> </cript>
<script src = "~ / contenu / jQuery-Slotmachine-Master / Dist / jQuery.slotmachine.js"> </ script>
<script src = "~ / contenu / toaster / toastr.min.js"> </ script>
Quelques points à noter ici:
1) La citation jQuery et Bootstrap sont toutes deux référencées par accélération CDN. Si vous ne comprenez pas l'accélération CDN, vous pouvez Baidu.
2) Le composant jQuery doit être pris en charge par JQuery 2.0 ou supérieur. Si la version est trop basse, il y aura des exceptions JS.
3) Le composant bootstrap n'est pas nécessaire, mais cette mise en page nécessite une prise en charge de style bootstrap.
4) Le composant Toastr n'est pas nécessaire, il est utilisé pour afficher les résultats gagnants ici.
1. Essayez le code de l'effet de chance
partie HTML
<div id = "triky"> <div style = "text-align: Center"> <h1> Veuillez sélectionner la nourriture que vous voulez </h1> <div> <div style = "margin: auto;"> <div id = "triky1"> <div> <img src = "/ content / jquet-slotmachine-master / cookie.png" /> </ div> src = "/ contenu / jQuery-Slotmachine-Master / Img / Food2.jpg" /> </div> <div> <img src = "/ contenu / jQuery-Slotmachine-Master / img / food2.jpg" /> </ div> <v> <img src = "/ contenu / jQuery-Slotmachine-Master </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>
Partie js
$ (function () {// essayez Luck var triky = $ ("# triky1"). Slotmachine ({actif: 2, // l'index de l'élément affiché pendant l'initialisation // de retard: 150, // change le temps d'intervalle entre deux images (millisecondes unités) // randomize: function () {// return 0; // l'indice de la valeur sélectionnée après chaque rotation (commençant à partir de 0 /}); $ ("# TrikyShuffle"). Cliquez sur (fonction () {Triky.shuffle (8); // Démarrer la méthode de rotation, le paramètre 8 signifie que 8 icônes sont ignorées chaque rotation});});Explication détaillée des propriétés, méthodes et événements communs communs
(1) Méthode d'initialisation var machine = $ ("# id"). Slotmachine ({}); Renvoie l'objet actuellement tourné. Les paramètres initialisés sont passés dans la méthode Slotmachine (), par exemple
actif: indique l'index de l'élément affiché lors de l'initialisation, à partir de 0
Retard: changez le temps d'intervalle entre deux images (unités de millisecondes)
Auto: que ce soit pour tourner automatiquement, la valeur est vraie ou fausse
Spins: lorsque l'auto est vrai, c'est le nombre d'icônes qui sont sautées à chaque fois
stophidden: si l'animation au début et à l'arrêt se produit lorsque l'animation se produit
randomize: function (ActiveElementIndex) {} Cette propriété représente l'index de la valeur sélectionnée après chaque rotation (à partir de 0)
Direction: la direction de l'animation, la valeur (up || down)
(2) méthodes courantes
machine.shuffle (répéter, onstopcallback); Indique le début de la rotation, la répétition indique le nombre d'images sautées à chaque fois; OnstopCallback indique la méthode de rappel des événements après l'arrêt de la rotation.
machine.prev (); Renvoie l'élément précédent
machine.next (); Renvoie l'élément suivant
machine.stop (); arrêter la rotation
machine.active; Obtient l'index de l'élément sélectionné
machine.running; détecte s'il est en rotation, c'est vrai signifie qu'il tourne
machine.stopping; Détection si elle s'est arrêtée
machine.destroy (); Détruit le nœud de rotation
2. Exemple de code d'effet de console de jeu simple
partie HTML
<div id = "randomize"> <div style = "text-adign: Center; max-width: 900px;"> <h1> console de jeu simple </h1> <div> <div> <div> <div> <div id = "Machine1"> <div> <img src = "/ contenu / jquet-slotmachine / img / slot1.png" /> </ div> <iMg / img / slot1.png " src = "/ contenu / jQuery-Slotmachine-Master / img / slot2.png" /> </ div> <v> <img src = "/ contenu / jQuery-slotmachine-master / img / slot3.png" /> </ div> <div> <img / src = "/ contenu / jQuery-slotmachine-master / img / src4.png" /> </ div> <div> <img src = "/ content / jQuery-slotmachine-master / img / slot5.png" /> </ div> <div> <img src = "/ contenu / jQuery-slotmachine-master / img / slot6.png" /> </ div> "" " <div> <img src = "/ contenu / jQuery-slotmachine-master / img / slot1.png" /> </ div> <div> <img src = "/ contenu / jQuery-slotmachine-master / img / slot2.png" /> </ div> <div> <img src = "/ contenu / jQuery-Slotmachine-Master / img / slot3.png" /> </ div> <v> <img src = "/ contenu / jQuery-Slotmachine-Master / img / slot4 /></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 = "/ contenu / jQuery-slotmachine-master / img / slot1.png" /> </ div> <div> <img src = "/ contenu / jQuery-slotmachine-master / img / slot2.png" /> </ div> <div> <img src = "/ contenu / jQuery-Slotmachine-Master / img / slot3.png" /> </ div> <v> <img src = "/ contenu / jQuery-Slotmachine-Master / img / slot4 /> </ div> <div> <img src = "/ content / jQuery-slotmachine-master / img / slot6.png" /> </ div> </div> </div> </ div> </ div> </div> </div> </div> <div> <div role = "groupe"> <div id = "ranomisbutton" type = "Button"> start </ starte </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Partie js
$ (function () {// Console de jeu simple var machine1 = $ ("# machine1"). slotmachine ({active: 0, delay: 500}); var machine2 = $ ("# machine2"). slotmachine ({active: 1, delay: 500, direction: 'down'}); var machine3 = $ ("# machine3"). var arr = []; || Arr [0] == Arr [2] || Arr [1] == Arr [2]) setTimeout (function () {machine2.shuffle (5, onComplete);}, 500);3. Exemple de code à effet d'arrêt unique
Partie HTML
<div id = "casino" style = "padding-top: 50px;"> <div> <h1> tirage au sort </h1> <v> <div id = "casino1" style = "margin-left: -65px;"> <v> </ div> <v> </ div> <v> </ div> </ div> <div> </v> </ div> </v> </v> <v> </v> </ div> </v> </v> <v> </div> </v> </v> </div> </v> </v> <v> </v> </ Div> </v> </v> <v> </v> </ Div> </ Div> </v> <v> </div> <div> </ div> <div> </ div> <div> </ div> <div> </ div> <div> </div> <div> </div> <div> </ div> <div> </ div> <v> </div> </ div> <div role = "Group"> <disp id = "slotmachinebuttonshuff" Type = "Button"> Début </v> type = "Button"> stop </ div> </div> </div> </div> </div> <div> </div> </div>
Partie js
$ (function () {// single stop var machine4 = $ ("# casino1"). slotmachine ({active: 0, delay: 500}); var machine5 = $ ("# casino2"). slotmachine ({active: 1, delay: 550}); machine6 = $ ("# casino"). $ ("# slotmachinebuttonshuff"). cliquez (function () {démarrage = 3; machine4.shuffle (); machine5.shuffle (); machine6.shuffle ();}); machine6.stop ();3. Résumé
L'ensemble du processus n'est pas compliqué. Toutes les propriétés, événements et méthodes peuvent être comprises et appliquées facilement en lisant la documentation. Il n'y a rien à dire sur le code de démonstration. Vous pouvez le comprendre à première vue. J'espère qu'il sera utile pour tout le monde d'apprendre des composants JavaScript.