Prefácio: Dois dias atrás, eu estava procurando componentes on -line e acidentalmente descobri o "componente de slotmachine" do nosso efeito de console de jogos de infância. Depois de navegá -lo, evoca as memórias da minha infância.
Vamos levá -lo a dar uma olhada em um componente tão mágico - slotmachine.
1. Visualização de componentes
Vamos obter um efeito simples primeiro
Acha que é muito simples? Não se preocupe, o bom show está chegando, tente sua sorte primeiro.
O que? Ainda não alcançando o efeito desejado, bom! Abaixo, o efeito real será lançado.
Cliquei por um longo tempo, mas não ganhei o prêmio. Não é de admirar que eu não pudesse ganhar quando era criança. Não acredito no mal, continuo clicando e iniciando e finalmente ganhei o prêmio uma vez. Realmente não é fácil.
E nossos resultados da loteria do final do ano, comece! parar!
2. Exemplos de código
Como é um componente JS, você deve primeiro baixar a biblioteca de componentes. Primeiro poste o endereço de código aberto
Então vamos dar uma olhada na referência do arquivo:
A cópia do código é a seguinte: <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.6/css/bootstrap.min.css" Integrity = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDDJZLPLEGXHJVME1FGJWPGMKZS7" Crossorigin = "Anonymous">
<link href = "~/content/jQuery-slotmachine-master/dist/jquery.slotmachine.css" rel = "Stylesheet"/>
<link href = "~/content/jQuery-slotmachine-master/css/style.css" rel = "STILESHET"/>
<link href = "~/content/toastr/toastr.min.css" rel = "STILESHEET"/>
<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"> </sCript>
<script src = "~/content/jQuery-slotmachine-master/dist/jquery.slotmachine.js"> </sCript>
<script src = "~/content/toastr/toastr.min.js"> </script>
Alguns pontos a serem observados aqui:
1) Quote jQuery e bootstrap são referenciados através da aceleração da CDN. Se você não entende a aceleração da CDN, pode Baidu.
2) O componente jQuery deve ser suportado pelo JQuery 2.0 ou superior. Se a versão estiver muito baixa, haverá exceções JS.
3) O componente de bootstrap não é necessário, mas esse layout requer algum suporte ao estilo de bootstrap.
4) O componente do TOAST não é necessário, é usado para exibir os resultados vencedores aqui.
1. Experimente o código de efeito da sorte
parte html
<div id = "triky"> <div style = "text-align: center"> <h1> Por favor, selecione os alimentos que você deseja </h1> <div> <div style = "margem: auto;"> <div id = "Triky1"> <div> <mg src = "/content/jQuery-slotmachine-p-mestre/iMgyie/cookie.p <mg src ="/content/jquery-slotmachine>/iMgie.P <mgwie. src = "/content/jQuery-slotmachine-mestres/img/food2.jpg"/> </div> <div> <img src = "/content/jquery-slotmachine-mestre/img/food2.jpg"/> </div> <mg src = "//jQuerylotMotm </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 parte
$ (function () {// Tente a sorte var triky = $ ("#triky1"). slotmachine ({ativo: 2, // o índice do item exibido durante a inicialização // atraso: 150, // alternar o tempo de intervalo entre duas figuras (milissegundos) ///11/11) // $ ("#TrikyShuff"). Clique em (function () {Triky.Shuffle (8); // Iniciar o método de rotação, o parâmetro 8 significa que 8 ícones são ignorados a cada rotação});Explicação detalhada das propriedades, métodos e eventos comuns do JS
(1) método de inicialização var máquina = $ ("#id"). Slotmachine ({}); Retorna o objeto atualmente girado. Os parâmetros inicializados são passados no método slotmachine (), por exemplo
Ativo: indica o índice do item exibido durante a inicialização, a partir de 0
Atraso: alterne o tempo de intervalo entre duas fotos (unidades de milissegundos)
Auto: se deve girar automaticamente, o valor é verdadeiro ou falso
giros: quando o automóvel é verdadeiro, este é o número de ícones que são ignorados a cada vez
StopHidden: se a animação no início e a parada ocorre quando a animação ocorre
randomize: function (ActiveElementIndex) {} Esta propriedade representa o índice do valor selecionado após cada rotação (a partir de 0)
Direção: a direção da animação, valor (up || para baixo)
(2) Métodos comuns
Machine.Shuffle (Repita, OnStopCallback); Indica o início da rotação, a repetição indica o número de imagens ignoradas a cada vez; OnstopCallback indica o método de retorno de chamada do evento após a parada de rotação.
máquina.prev (); Retorna o elemento anterior
máquina.Next (); Retorna o próximo elemento
máquina.stop (); pare de rotação
máquina.Active; recebe o índice do elemento selecionado
MACHER.RUNNING; detecta se está girando, verdadeiro significa que está girando
Machine.Stopping; Detecção se ele parou
máquina.Destroy (); destrói o nó de rotação
2. Exemplo de código de efeito do console de jogo simples
parte html
<div id = "randomize"> <div style = "text-align: Center; max-width: 900px;"> <h1> console de jogo simples </h1> <div> <div> <div> <div> <div id = "Machine1"> 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> <div id="machine2"> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-mestre/img/slot2.png"/> </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-mestre/img/slot5.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-mestre/img/slot6.png"/</</> </> <//> <//> </e </> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-mestre/img/slot2.png"/> </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-mestre/img/slot6.png"/> </div> </div> </div> </div> </div> <brotlenomizebt </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
JS parte
$ (function () {// Console de jogo simples var máquina1 = $ ("#máquina1"). slotMachine ({ativo: 0, atraso: 500}); var máquina2 = $ ("#máquina2"). var = []; ||. Settimeout (function () {Machine2.Shuff (5, Oncomplete);}, 500);3. Exemplo de código de efeito de parada única
Parte html
<div id = "cassino" style = "Padding-top: 50px;"> <div> <h1> sorteio </h1> <div> <div id 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> <butão <blot role = "group"> <dd = "slotmachinebuttonfluffffuil" " type = "Button"> Stop </div> </div> </div> </div> </div> <div> </div> </div>
JS parte
$ (function () {// SOPAT STOP var Machine4 = $ ("#Casino1"). SlotMachine ({Active: 0, Atraso: 500}); var Machine5 = $ ("#casino2"). $ ("#slotMachineButtonShuff"). Clique em (function () {iniciado = 3; Machine4.Shuffle (); Machine5.Shuffle (); Machine6.Shuffle ();}); Machine6.Stop ();3. Resumo
Todo o processo não é complicado. Todas as propriedades, eventos e métodos podem ser entendidos e aplicados facilmente lendo a documentação. Não há nada a dizer sobre o código de demonstração. Você pode entender isso à primeira vista. Espero que seja útil para todos aprenderem componentes JavaScript.