Se ainda não entendeu, clique AQUI
para ver uma demonstração. Ao carregar a página, clique no link "Div 1" no menu horizontal e irá abrir a aula de hoje. Redimensione a janela do seu navegador para ver o efeito.
CÓDIGO ATUALIZADO
1 - Criação e estilo da div
Bom, primeiro de tudo precisamos criar a div. Repare no estilo aplicado a ela, eles são essenciais para que funcione.
<div id='bloco' style='background:url(IMAGEM) no-repeat; min-width:100%;background-size:cover;'> </div>Substitua o trecho "IMAGEM" pelo url da imagem de plano de fundo.
2 - Código jQuery
Agora precisamos criar o código que faz tudo funcionar. Cole isso entre <head> e </head>.
Primeiramente, inclua a biblioteca jQuery no arquivo. ( não precisa adicionar se já tiver feito antes):
<script src='http://code.jquery.com/jquery-latest.js'/>Agora, cole o código principal, que já está explicado nos comentários:
$(document).ready(function(){
var altura_tela = $(window).height();/*cria variável com valor do altura da janela*/ $("#bloco").height(altura_tela); /* aplica a variável a altura da div*/ $( window ).resize(function() { /*quando redimensionar a janela faz a mesma coisa */ var altura_tela = $(window).height();
$("#bloco").height(altura_tela);
});
});
E pronto, já está funcionando! Agora, se quiser fazer esse efeito de "abrir e fechar" uma div, leia essa nossa aula que deve te ajudar: (ler item 4)
NÃO PLAGIE ! DÊ CRÉDITOS E REFERÊNCIAS!
Categorias:
0 Comentários
