MarcosCS
-
Posts
2 -
Cadastrado em
-
Última visita
-
JQuery - efeito flip em várias imagens
MarcosCS respondeu ao tópico de MarcosCS em Web e banco de dados
@DiF Boa noite. Cara, muito obrigado mesmo! Valeu demais a sua ajuda!!! Funcionou direitinho, exatamente como eu estava pensando!!! Obrigado mesmo pela disponibilidade! -
Boa tarde, pessoal! Estou começando com HTML há pouco tempo e tenho que entregar um trabalho na faculdade. Na página que estou fazendo quero fazer um efeito flip com algumas imagens, sendo ao clicar nelas seja exibido um pequeno painel sobre cada uma delas, de forma independente. Com o código que eu fiz não consigo fazer isso em todas as fotos, apenas na primeira imagem. Segue o esboço do código: <!Doctype html> <html> <head> <title>TESTE</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <meta charset = 'utf=8'> <style type="text/css"> body{ background: gray; } #flip{ cursor: pointer; } #panel{ text-align: justify; padding: 5px; display: none; width: 25%; opacity: 0.4; background-color: #ffffff; } </style> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> </head> <body> <div align = 'left' > <img id = 'flip' src = 'foto1.jpg'> <div>Nome da Foto</div> <div id = 'panel'>Aqui foi reservado para que seja exposto um pequeno texto referenete a imagem clicada.</div> </div> <div align = 'center' > <img id = 'flip' src = 'foto1.jpg'> <div>Nome da Foto</div> <div id = 'panel'>Aqui foi reservado para que seja exposto um pequeno texto referenete a imagem clicada.</div> </div> <div align = 'right' > <img id = 'flip' src = 'foto1.jpg'> <div>Nome da Foto</div> <div id = 'panel'>Aqui foi reservado para que seja exposto um pequeno texto referenete a imagem clicada.</div> </div> </body> </html>
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais