Fundo Dinâmico jQuery
Boa tarde!
Gostaria de tirar uma dúvida com vocês.
Estou desenvolvendo um site, porém estou com problemas na alteração do background dinamicamente com jquery.
A estrutura do meu site está da seguinte forma:
<body>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{background:url(image.png) no-repeat;}
Eu peguei esse código pronto na internet:
<style type=text/css>
#background1{background:url(background_1.png) no-repeat;}
#background2{background:url(background_2.png) no-repeat;}
#background3{background:url(background_3.png) no-repeat;}
#background4{background:url(background_4.png) no-repeat;}
.bg{
position: absolute;
width: 100%;
height: 100%;
background-position: center bottom;
background-repeat: no-repeat;
}
</style>
<script type=text/javascript src=jquery.js></script>
<script type=text/javascript>
$(document).ready(function(){
/* Classe padrão dos backgrounds */
var bgClass = div.bg;
/* Prefixo para IDs dos backgrounds */
var bgPrefix = background;
/* Tempo para fade in-out */
var fade = 3000;
/* Não precisa alterar estas =P */
var bgSize = $(bgClass).size();
var curSize = 1;
var timerSrc = ;
/* Mostra apenas o primeiro bg */
$(bgClass).hide();
$(bgClass + :first).show();
/* Se houver divs com classes BG */
if (bgSize){
/* Inicia o loop dos backgrounds */
timerSrc = setInterval (function (){
/* Oculta um fundo e exibe outro */
$(# + bgPrefix + curSize).fadeOut(2000);
curSize = (curSize >= bgSize) ? 1 : curSize + 1;
$(# + bgPrefix + curSize).fadeIn(1000);
}, fade);
}
});
</script>
Para funcionar, eu deixo o script do site assim:
<body>
<div id=background1 class=bg></div>
<div id=background2 class=bg></div>
<div id=background3 class=bg></div>
<div id=background4 class=bg></div>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{sem puxar a imagem de fundo por aqui.}
O fundo altera sem falhas, o problema é que esconde o conteúdo do site e só aparece na transição das imagens.
Alguém sabe me dizer como posso resolver esse problema?
Obrigado!
Gostaria de tirar uma dúvida com vocês.
Estou desenvolvendo um site, porém estou com problemas na alteração do background dinamicamente com jquery.
A estrutura do meu site está da seguinte forma:
<body>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{background:url(image.png) no-repeat;}
Eu peguei esse código pronto na internet:
<style type=text/css>
#background1{background:url(background_1.png) no-repeat;}
#background2{background:url(background_2.png) no-repeat;}
#background3{background:url(background_3.png) no-repeat;}
#background4{background:url(background_4.png) no-repeat;}
.bg{
position: absolute;
width: 100%;
height: 100%;
background-position: center bottom;
background-repeat: no-repeat;
}
</style>
<script type=text/javascript src=jquery.js></script>
<script type=text/javascript>
$(document).ready(function(){
/* Classe padrão dos backgrounds */
var bgClass = div.bg;
/* Prefixo para IDs dos backgrounds */
var bgPrefix = background;
/* Tempo para fade in-out */
var fade = 3000;
/* Não precisa alterar estas =P */
var bgSize = $(bgClass).size();
var curSize = 1;
var timerSrc = ;
/* Mostra apenas o primeiro bg */
$(bgClass).hide();
$(bgClass + :first).show();
/* Se houver divs com classes BG */
if (bgSize){
/* Inicia o loop dos backgrounds */
timerSrc = setInterval (function (){
/* Oculta um fundo e exibe outro */
$(# + bgPrefix + curSize).fadeOut(2000);
curSize = (curSize >= bgSize) ? 1 : curSize + 1;
$(# + bgPrefix + curSize).fadeIn(1000);
}, fade);
}
});
</script>
Para funcionar, eu deixo o script do site assim:
<body>
<div id=background1 class=bg></div>
<div id=background2 class=bg></div>
<div id=background3 class=bg></div>
<div id=background4 class=bg></div>
<div id=site>
<!--todo o conteúdo do site aqui!-->
</div>
</body>
O background do site está assim:
style.css --> body{sem puxar a imagem de fundo por aqui.}
O fundo altera sem falhas, o problema é que esconde o conteúdo do site e só aparece na transição das imagens.
Alguém sabe me dizer como posso resolver esse problema?
Obrigado!
Abraão Marques
Curtidas 0
Respostas
Ricardo Arrigoni
27/05/2012
Qual a condição para mudar o background?
No seu caso eu acho que você teria que criar uma função e nessa função definir a que momento determinado background iria ser usado.(Muito comum quando usam um background para o dia e outro para a noite)
O ideal seria não criar divs para cada background, e sim usar a própria div body mesmo, em último caso criar uma única div para usar só o background.
abs
No seu caso eu acho que você teria que criar uma função e nessa função definir a que momento determinado background iria ser usado.(Muito comum quando usam um background para o dia e outro para a noite)
O ideal seria não criar divs para cada background, e sim usar a própria div body mesmo, em último caso criar uma única div para usar só o background.
abs
GOSTEI 0
Abraão Marques
27/05/2012
Valeu pela a ajuda, fera!
Tentarei fazer isso.
Tentarei fazer isso.
GOSTEI 0
Ricardo Arrigoni
27/05/2012
Show de bola!
Se conseguir depois posta como fez pra resolver aqui :)
abs
Se conseguir depois posta como fez pra resolver aqui :)
abs
GOSTEI 0
Ricardo Arrigoni
27/05/2012
conseguiu resolver?
GOSTEI 0