Olá Gregos e Troianos, bom hoje vou falar sobre um efeito parecido com jqDocks, aquele efeito parecido com o menu do Mac OS.
Pois bem, tenho um amigo que estava precisando de um efeito parecido porem mais simples, apenas que aumenta-se as imagens quando houver a ação do hover do ponteiro do rato "passa-se o mouse em cima da imagem."
Então fiz um exemplo, vou mostrar como funcionaria este efeito, vamos lá !
1 - Linkaremos o jQuery no documento.
<head> ... <script src="jquery-1.3.2.min.js" type="text/javascript"></script> ... </head>
Algumas pessoas preferem carregar o jQuery para aplicação atraves do Google CDN "Rede de distribuição de conteúdo pela economia", por causa da economia de banda geralmente usuários que navegam pelo Google já vem com esse script em cache.
A sua utilização é simples de ser feita, vou mostrar a que considero mais simples de todas elas.
<head> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> ... </head>
2 - Agrora vamos a função jQuery:
<head> ... <script type="text/javascript"> $(document).ready(function(){ Width = "30px"; Height = "28px"; $("ul#go img").hover( function () { $(this).css({'position' : 'absolute', 'z-index' : '1000'}); $(this).stop().animate({ width: "60px", height: "56px" }, 500 ); }, function () { $(this).stop().css({'position' : 'static', 'z-index' : '10'}); $(this).animate({ width: Width, height: Height }, 500 ); } ); }); </script> ... </head>
Ah quem prefira também usar ao invés do hover, usar mouseover e mouseout então vou mostrar como ficaria aplicando estes eventos também.
<head> ... <script type="text/javascript"> $(document).ready(function(){ Width = "30px"; Height = "28px"; $("ul#go img").mouseover( function(){ $(this).css({'position' : 'absolute', 'z-index' : '1000'}); $(this).stop().animate({ width: "60px", height: "56px" }, 500 ); }); $("ul#go img").mouseout( function(){ $(this).css({'position' : 'static', 'z-index' : '10'}); $(this).stop().animate({ width: Width, height: Height }, 500 ); }); }); </script> ... </head>
Ok, Agora vamos falar um pouco sobre a função.
Primeiro Defino o Lagura da imagem em primeira instância em:
Width = "30px"; e Height = "28px"; esse é o tamanho natural da imagem, logo abaixo defino que ao passar o mouse por cima da imagem ele executara a função Animate (animação) e aumenta-ra seu tamanho para:
W 60px e H 56px, assim deixando a imagem maior.
Logo a baixo defino um número 500 este número é tempo que levara para animação ser executada neste caso 5 segundos até a imagem ficar completamente aumentada.
A função seguinte é basicamente igual a primeira, porem defino que width será igual a variável que criamos logo a cima, Width = "30px" no caso será igual a 30px e altura a mesma coisa, repetindo também o tempo de animação.
3 - Agora vamos ver o nosso HTML:
<body> ... <ul id="go"> <li><img src="suapasta/suaimagem.jpg" alt="teste" /></li> <li><img src="suapasta/suaimagem.jpg" alt="teste" /></li> <li><img src="suapasta/suaimagem.jpg" alt="teste" /></li> </ul> ... </body>
4 - E por último e não menos importante vamo ver agora nosso CSS;
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; } body { background: #0f1923; margin-top:50px; } #container { width:415px; margin:auto; border:1px solid #2f404f; padding:20px 0; } h1 { text-indent:-9000px; background:url(logo.jpg) top center no-repeat; width:410px; height:57px; padding-bottom:20px; } ul#go { list-style:none; float:left; margin:0 0 0 80px; width:230px; padding:0; } ul#go li { float:left; margin: 0 0 10px 10px; width:30px; height:28px; position:relative } ul#go li img { border:2px solid #CCC; } #powerby { float:left; width:90%; text-align:center; padding-top:20px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #powerby a { padding-left:5px; text-decoration:none; color:#364858 } #powerby a:hover { color:#ccc; } .clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
Nesse caso o css não influencia no funcionamento de nosso exemplo, é só para deixar nosso "ambiente" mais agradável.
Bom é isso, se alguém quiser criticar ou melhorar o código fiquem a vontade, só mandar como comentário e eu postarei.
E assim encerramos !
É um exemplo bem simples, espero ajudar.
Abraço a todos!
Uma dica enviado pelo Valmir Justo muito importante foi inserir um stop() no elemento $(this) logo depois seguindo o .animate() então ficando assim:
<script type="text/javascript"> ... $(this).stop().animate({ }); ... </script>
Ele funcionaria mais o menos assim, objeto -> para o que esta fazendo -> executa somente a animação.
No código anterior quando você passava o mouse diversas vezes ele executava diversas vezes a mesma animação até mesmo depois de já ter tirado o mouse de cima da imagem com esse stop() isso foi corrigido.
Obrigado Valmir pela colaboração.
