TADS:Desenvolvimento Web: codigos1102
De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar
Atencão, pois estes exemplos precisam que a biblioteca jQuery esteja na pasta dos exemplos. Além disso, o primeiro exemplo precisa de uma imagem chamada "exemplo.jpg" esteja na mesma pasta do arquivo.
<html>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("#botao1").click(function(){
//$("#imagem").hide();
//$("#imagem").fadeOut(2000);
//$("#imagem")fadeToggle(1000);
$("#imagem").fadeTo("slow", 0.33);
/*$("#imagem").slideUp(1000, function(){
alert("terminou de esconder");
});*/
});
$("#botao2").click(function(){
//$("#imagem").show();
//$("#imagem").fadeIn(2000);
$("#imagem").fadeTo("slow", 1);
//$("#imagem").slideDown(1000)
});
});
</script>
<head></head>
<body>
<input type="button" value="clicar" id="botao1"><br>
<input type="button" value="clicar2" id="botao2"><br>
<img src="exemplo.jpg" id="imagem">
</body>
</html>
<html>
<script src="jquery-1.11.3.min.js"></script>
<head>
<style>
#teste{
width: 100px;
height: 100px;
background: #FAA456;
position: absolute;
border: solid 1px black;
}
#teste2{
width: 100px;
height: 100px;
background: #A98765;
position: absolute;
border: solid 1px black;
}
</style>
<script>
$(document).ready(function(){
$("#botao").click(function(){
/*$("#teste").animate(
{
left: "250px",
opacity: "0.5",
width : "200px",
height: "200px",
borderWidth: "50px"
},
3000 );*/
/*$("#teste").animate({left: "250px"},1000);
$("#teste").animate({opacity: "0.5"},1000);
$("#teste").animate({width: "200px"},1000);
$("#teste").animate({height: "200px"},1000);*/
$("#teste").animate({left: "250px"}, 1000)
.animate({opacity: "0.5"}, 1000)
.fadeOut("slow")
.fadeIn("slow");
$("#teste2").animate({left: "450px"},1000);
$("#teste2").animate({opacity: "0.3"},1000);
$("#teste2").animate({width: "50px"},1000);
$("#teste2").animate({height: "50px"},1000);
});
});
</script>
</head>
<body>
<input type="button" value="clicar" id="botao"><br>
<div id="teste"></div>
<div id="teste2"></div>
</body>
</html>
<html>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("#botao1").click(function(){
});
});
</script>
<style>
div{
color: #FFFFFF;
background: #333333;
width: 50%;
margin: auto;
}
.titulo{
margin-top: 20px;
height: 40px;
}
.noticia{
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#titulo1").click(function(){
$(".noticia").slideUp("500");
$("#noticia1").slideToggle("slow");
});
$("#titulo2").click(function(){
$(".noticia").slideUp("500");
$("#noticia2").slideToggle("slow");
});
$("#titulo3").click(function(){
$(".noticia").slideUp("500");
$("#noticia3").slideToggle("slow");
});
});
</script>
<head></head>
<body>
<div id="titulo1" class="titulo">Alunos do TADS conseguem ganhar na maratona de programacão 2016</div>
<div id="noticia1" class="noticia">Os alunos do segundo semestre do curso TADS conseguiram uma proeza fascinante. Um dos professores fala sobre o assunto... "Olha, quando comecei a trabalhar com eles, achei que não iria dar em nada. Pessoal meio sem perspectiva de vida ou saúde. Muitos você via nos olhos que não deveria estar aqui. Mas hoje eu vejo que estava enganado, e todos são muito inteligentes e tem habilidades únicas, pena que na maioria das vezes usado para o mal"</div>
<div id="titulo2" class="titulo">Nova dupla Wesley Safadão e Joelma quebram a internet com o novo hit do verão</div>
<div id="noticia2" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
<div id="titulo3" class="titulo">Professor é expulso de parquinho por não deixar outras criancas usarem o escorregador</div>
<div id="noticia3" class="noticia">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</div>
</body>
</html>
