Prefacio: Hace dos días, estaba buscando componentes en línea y descubrí accidentalmente el "componente Slotmachine" de nuestro efecto de consola de juegos infantil. Después de navegarlo, evoca los recuerdos de mi infancia.
Llevamos a echar un vistazo a un componente tan mágico: Slotmachine.
1. Vista previa de componentes
Primero obtengamos un efecto simple
¿Crees que es demasiado simple? No te preocupes, viene un buen espectáculo, prueba tu suerte primero.
¿Qué? No logrando el efecto deseado todavía, ¡bueno! A continuación, se lanzará el efecto real.
Hice clic durante mucho tiempo, pero no gané el premio. No es de extrañar que no pudiera ganar cuando era niño. No creo en el mal, sigo haciendo clic y comenzando, y finalmente gané el premio una vez. Realmente no es fácil.
Y nuestra lotería de fin de año, ¡comience! ¡detener!
2. Ejemplos de código
Dado que es un componente JS, primero debe descargar la biblioteca de componentes. Primero publicar la dirección de código abierto
Luego echemos un vistazo a la referencia del archivo:
La copia del código es la siguiente: <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" Integrity = "Sha384-1q8mtjoasx8j1au+a5wdvnpi2lkffwweaaa8hdddjzlplegxhjvme1fgjwpgmkzs7" "anónimo">>>
<link href = "~/content/jQuery-slotmachine-Master/Dist/jQuery.slotmachine.css" rel = "Stylesheet"/>
<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.1.min.js"> </script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0msbjdehialfmubbqp6a4qrrq5ovfw37prr3j5elqxs1yvqoTNEPNHVP9AJ7XS" CrossOrigin = "Anónimo"> </script>
<script src = "~/content/jQuery-slotmachine-Master/dist/jQuery.slotmachine.js"> </script>
<script src = "~/content/toastr/toastr.min.js"> </script>
Algunos puntos a tener en cuenta aquí:
1) La cita jQuery y Bootstrap se hacen referencia a través de la aceleración de CDN. Si no comprende la aceleración de CDN, puede Baidu.
2) El componente jQuery debe ser compatible con jQuery 2.0 o superior. Si la versión es demasiado baja, habrá excepciones JS.
3) El componente Bootstrap no es necesario, pero este diseño requiere un poco de soporte de estilo Bootstrap.
4) El componente Toastr no es necesario, se usa para mostrar los resultados ganadores aquí.
1. Prueba el código de efecto de suerte
parte html
<div id="triky"> <div style="text-align: center"> <h1>Please select the food you want</h1> <div> <div style="margin: auto;"> <div id="triky1"> <div> <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" /> </div> <div> <img src = "/content/jQuery-slotmachine-Master/img/food2.jpg"/> </div> <div> <vg src = "/content/jQuery-slotmachine-Master/img/food2.jpg"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/img/food3.jpg" </div> <viv> <div style = "margin-left: -15px" role = "group"> <div id = "trikyshuffle" type = "button"> intente suerte </div> </div> </div> </div> </div>
Parte js
$ (function () {// intenta suerte var triky = $ ("#triky1"). slotMachine ({activo: 2, // El índice del elemento mostrado durante la inicialización // retraso: 150, // conmutación el tiempo de intervalo entre dos imágenes (unidades de MilliseConds) // aleatorize: function () {// return 0; $ ("#trikyshuffle"). Click (function () {triky.shuffle (8); // Iniciar el método de rotación, el parámetro 8 significa que 8 iconos se omiten cada rotación});Explicación detallada de las propiedades, métodos y eventos de JS comunes
(1) método de inicialización var máquina = $ ("#id"). Slotmachine ({}); Devuelve el objeto girado actualmente. Los parámetros inicializados se pasan en el método slotmachine (), por ejemplo
Activo: indica el índice del elemento mostrado durante la inicialización, comenzando desde 0
Retraso: cambie el tiempo de intervalo entre dos imágenes (unidades de milisegundos)
Auto: si se debe girar automáticamente, el valor es verdadero o falso
Giros: cuando el auto es verdadero, este es el número de iconos que se omiten cada vez
stophidden: si la animación al principio y la parada ocurre cuando ocurre la animación
aleatorize: function (ActiveElementIndex) {} Esta propiedad representa el índice del valor seleccionado después de cada rotación (a partir de 0)
Dirección: la dirección de la animación, valor (arriba || hacia abajo)
(2) Métodos comunes
Machine.shuffle (repetir, onStopCallback); indica el inicio de la rotación, la repetición indica el número de imágenes omitidas cada vez; OnStopCallback indica el método de devolución de llamada del evento después de que se detiene la rotación.
Machine.prev (); Devuelve el elemento anterior
Machine.next (); Devuelve el siguiente elemento
Machine.stop (); Detener la rotación
máquina activa; Obtiene el índice del elemento seleccionado
máquina. detecta si está girando, verdadero significa que está girando
Machine.Stopping; Detección de si se ha detenido
máquina.destroy (); destruye el nodo de rotación
2. Ejemplo de código de efecto de consola de juego simple
parte html
<div id="randomize"> <div style="text-align: center;max-width: 900px;"> <h1>Simple game console</h1> <div> <div> <div> <div> <div id="machine1"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src = "/content/jQuery-slotmachine-Master/img/slot2.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-Master/img/slot3.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/slot4.png/slot4.png/slot4.png/slot4.png/slot4.png /></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="machine2"> <Div> <img src = "/content/jQuery-slotmachine-Master/img/slot1.png"/> </div> <div> <div> <img src = "/content/jQuery-slotmachine-Master/img/slot2.png"/> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></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-slotmachine-Master/img/slot1.png"/> </div> <div> <div> <img src = "/content/jQuery-slotmachine-Master/img/slot2.png"/> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></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> </bon> </div> <div> <div role = "grupo"> <Div id = "ranomizebutton" type = "button" </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Parte js
$ (function () {// console de juego simple var máquina1 = $ ("#máquina1"). slotmachine ({activo: 0, demora: 500}); var máquina2 = $ ("#máquina2"). slotmachine ({activo: 1, demora: 500, dirección: 'abajo'}); var máquina3 = $ ("#maquina3"). slotmachine ({{{{{{{}: 500}: 500}). var = []; arr [1] || onComplete);3. Ejemplo de código de efecto de parada única
Parte html
<div id = "casino" style = "Padding-top: 50px;"> <div> <h1> raffle </h1> <div> <div id = "casino1" style = "margin-left: -65px;"> <div> </div> <biv> </div> <div> <biv> <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> <d <biv role = "grupo"> <divi = "slotmachinebuttonshufflefle" type = "button" type = "Button"> Stop </div> </div> </div> </div> </div> <div> </div> </div>
Parte js
$ (function () {// Single Stop var máquina4 = $ ("#casino1"). slotMachine ({activo: 0, demora: 500}); var máquina5 = $ ("#casino2"). slotmachine ({activo: 1, demora: 550}); máquina 6 = $ ("#casino3"). slotmachine ({{activo: 2, 600}; $ ("#slotmachineButtonshuffle"). Click (function () {inicio = 3; Machine4.Shuffle (); Machine5.Shuffle (); Machine6.Shuffle ();}); Machine6.stop ();3. Resumen
Todo el proceso no es complicado. Todas las propiedades, eventos y métodos se pueden entender y aplicar fácilmente leyendo la documentación. No hay nada que decir sobre el código de demostración. Puedes entenderlo a primera vista. Espero que sea útil para todos aprender componentes de JavaScript.