Este é um tutorial simples que ensina como criar um efeito focus em imagens recorrendo a jQuery, o resultado final será este, para visualizarem o efeito basta passarem o rato pelas imagens. Vamos então começar o tutorial:
1º passo – Criação do HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Efeito focus em imagens com jQuery</title> </head> <body> <div class="focus"> <img src="imagem1.jpg" title="imagem1" alt="imagem1" /> <img src="imagem2.jpg" title="imagem2" alt="imagem2" /> <img src="imagem3.jpg" title="imagem3" alt="imagem3" /> </div> </body> </html>
2º passo – Adicionar biblioteca jQuery ao HTML e criação do código Javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Efeito focus em imagens com jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="focus.js"></script> </head> <body> <div class="focus"> <img src="imagem1.jpg" title="imagem1" alt="imagem1" /> <img src="imagem2.jpg" title="imagem2" alt="imagem2" /> <img src="imagem3.jpg" title="imagem3" alt="imagem3" /> </div> </body> </html>
Como podem ver, adicionamos a biblioteca jQuery bem como o caminho do nosso ficheiro Javascript (focus.js), vamos agora criar o código necessário dentro do ficheiro focus.js:
$(document).ready(function() {
$('.focus').children().hover(function() {
$(this).stop().fadeTo(300,0.5);
}, function() {
$(this).stop().fadeTo(300,1);
});
});
E chegamos ao final, bastante simples certo? Espero que tenham gostado deste pequeno tutorial, irei tentar actualizar mais o blog com artigos como este.
excelente tutorial, poderia ter anexado no final um link para baixar os arquivos
ó caso não der certo verifique que o jQuery é atualizado constantemente, então verifique a versão que você baixou
No exemplo está:
Mas quando eu fui baixar do site do jQuery veio esta versão:
Sem duvida o jQuery veio facilitar muitas coisas no mundo web
Poxa, me salvou!!!! Valeu cara!!
Gostei dos efeitos, mas gostaria de saber se há outros diponíveis, pois quero parar de usar o FLASH e usar apenas javascript e simular os mesmos efeitos.
Por favor, poderia postar mais exemplos?
Parabéns pela iniciativa e muito grato!