Fundo Dinâmico jQuery
27/05/2012
0
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
Curtir tópico
+ 0
Responder
Posts
04/06/2012
Ricardo Arrigoni
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
Responder
08/06/2012
Ricardo Arrigoni
Show de bola!
Se conseguir depois posta como fez pra resolver aqui :)
abs
Se conseguir depois posta como fez pra resolver aqui :)
abs
Responder
Clique aqui para fazer login e interagir na Comunidade :)
