Como criar um menu horizontal scroll estilo Video Game?

paulosergioduffpro · Janeiro 17, 2017

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>