Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou tentando criar um menu com as seguintes características:
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](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>Carregando comentários...