Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

paulosergioduffpro

Como criar um menu horizontal scroll estilo Video Game?

Por , em Javascript

Recommended Posts

paulosergioduffpro    0

paulosergioduffpro
Postado
Estou tentando criar um menu com as seguintes características:


  • - Horizontal com scroll
  • - Funcionando através de touch/scroll dos dispositivos móveis.
  • - Deixar selecionado a opção do meio da div, com um evento JavaScript/Jquery (ou uma div dentro de um container com link)
  • - Imagem da Div do meio em destaque (maior)
  • Parecido com os menus de videogame, em que as opções vão para o lado horizontalmente. Só que com scroll dos dispositivos móveis.

Tento pensar em algum efeito javascript, Jquery, código exemplo na internet, mas não consigo nada conclusivo. Tentei alguma coisa usando Swipe do Jquery Mobile, CSS com overflow-x: scroll, mas não consigo pensar em nenhum evento para selecionar a opção do meio do menu, ou deixar a div do meio com imagem maior (usando o touch do dispositivo é claro, não o mouse).


Eis o meu código com minhas tentativas:





  <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>




    <script src="frameJS/deslizante.js"></script>


    <style type="text/css">


    body{ overflow-x: scroll; } 


    .produtos

     {

     position: fixed;

     top: 20px;

     z-index: 1;

     }


    .scroll

    {

     opacity: 0.3;

     z-index: 2;

     position: fixed;

    }


    #mover

     {

     position: fixed;

     bottom: 30px;

     }


    #elementoEsquerda

     {

     left: 10px;

     }

    #elementoCentral

     {

     margin-left: 50%;


     }

    #elementoDireita

     {

     right: 10px;

     }


    #caixaDeslizante


     {

     height: 300px;

     width: 450px;

     overflow-x: auto;

         white-space: nowrap;


     }


     .container {

        width: 100%;

        border-color: blue;

        text-align: center;

        left: -50%; 

    }


    .botaoComprar

     {

     position: relative;

     width: 100px;

     height: 20px;

     top: 180px;

     background-color: blue;

     border-style: solid;

     border-color: green;

     }


    .produto {

        display: inline-block;

        width: 100px; height: 200px;

        margin: 10px 20px;

        border-style: solid;

     border-color: green;

    }


    #produto-1 { background-color: rgba(255,0,0,0); }

    #produto-2 { background-color: green; }

    #produto-3 { background-color: pink; }

    #produto-4 { background-color: #ccc; }

    #produto-5 { background-color: #000; }

    #produto-6 { background-color: pink; }

    #produto-7 { background-color: pink; }

    #produto-8 { background-color: pink; }

    #produto-9 { background-color: pink; }

    #produto-10 { background-color: pink; }


    </style>


    <script type="text/javascript">

     $.mobile.changePage("hinoNac"); 


     function mudaLink()

     {

     document.location.href = "homeFrame.html";

     }

    </script>




    </head>

    <body >


    <div data-role="page" id="pageone" style="background-color: #ffffff;">



      <div data-role="main" class="ui-content" id="deslizante"  style="background-color: #ffffff;">

        <div id="alvo" ><div id="objeto" style="position: fixed; top: 0px; left: 10px;">Objeto</div></div>






    <div id="caixaDeslizante">

    <div id="deslizante" class="container">

    <canvas style="background-color: #ccc; width: 100%; height: 90px;" id="deslizante" class="scroll"></canvas>

        <div id="produto-1" class="produto">1<div class="botaoComprar"></div></div>

        <div id="produto-2" class="produto">2<div class="botaoComprar"></div></div>

        <div id="produto-3" class="produto">3<div class="botaoComprar"></div></div>

        <div id="produto-4" class="produto">4<div class="botaoComprar"></div></div>

        <div id="produto-5" class="produto">5<div class="botaoComprar"></div></div>

        <div id="produto-6" class="produto">6<div class="botaoComprar"></div></div>

        <div id="produto-7" class="produto">7<div class="botaoComprar"></div></div>

        <div id="produto-8" class="produto">8<div class="botaoComprar"></div></div>

        <div id="produto-9" class="produto">9<div class="botaoComprar"></div></div>

    </div>

    </div>




    </body>


    </html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

As vezes a busca pode ser mais feliz em termos 'inglês'

Exemplo da minha 'pergunta' :

carousel suport touch jquery

Resposta:

http://glide.jedrzejchalubek.com/

touch é o evento de clique em mobile

carousel é .... bom se sabe HSuaHSHUA

Obs:

Conhece a opção 'Cltr + Shift + M' do Chrome? (Obs: após estar com o console aberto), pode te ajudar nos estudos xD

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

Emulando Touch no PC:

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports#device-specific_mode

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito