Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, eu gostaria de mudar à background do meu site. Aí eu encontrei este código que fica mudando à background aleatóriamente. Mais o que eu desejo é que à background só mude quando anoitecer e quando amanhecer, ou seja 18:00 e 06:00 a background irá mudar.
Como eu fasso isto?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lorem ipsum dolor sit amet</title>
<style type="text/css" media="screen">
body {padding: 0;
font-family:
Verdana;
font-size:
12px;
line-height: 17px;}
h1, p {margin: 0 20px 20px 20px;
padding: 0;}
div.content {position:
absolute;
width: 684px;
height: 484px;
left: 50%;
top: 50%;
margin: -242px 0 0 -342px; background-image: url([http://dl.zatec.us/2010-10/sz0ye3g1.png](http://dl.zatec.us/2010-10/sz0ye3g1.png));}
div.content div.white {width: 600px;
height: 400px;
margin: 12px 42px 0 42px;
opacity: 0.9;
filter: alpha(opacity=90);/ CSS necessário para efeito nos backgrounds /
html, body {height: 100%;
margin: 0;}
div.bg {position: absolute;
width: 100%;
height: 100%;
background-position:
center bottom;
background-repeat:
no-repeat;}
div#background1 {background-image: url([http://dl.zatec.us/2010-10/23fzl6da.jpg](http://dl.zatec.us/2010-10/23fzl6da.jpg));}
div#background2 {background-image: url([http://dl.zatec.us/2010-10/b6o615z8.jpg](http://dl.zatec.us/2010-10/b6o615z8.jpg));}
</style>
<script type="text/javascript" language="javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">](http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js)
<script type="text/javascript" language="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>
</head>
<body>
<!-- Início dos backgrounds -->
<div class="bg" id="background1"></div>
<div class="bg" id="background2"></div>
<!-- Fim dos backgrounds -->
<div class="content">
<div class="white">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut mauris sem, ac bibendum erat. Cras ut lacus non sem dapibus vestibulum. Aenean aliquam, sapien id ultricies semper, felis metus luctus lorem, id aliquam lorem mi a orci.</p>
<p>Duis faucibus, orci in varius ultricies, nisi nisi elementum mauris, id placerat orci eros dictum nibh. Ut et augue nunc, eget gravida velit. Sed a fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Duis faucibus, orci in varius ultricies, nisi nisi elementum mauris, id placerat orci eros dictum nibh. Ut et augue nunc, eget gravida velit. Sed a fringilla mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Nam tortor purus, vulputate quis scelerisque vestibulum, molestie fringilla felis. Praesent eros ipsum, scelerisque vel interdum in, adipiscing vitae orci. Fusce fringilla leo vitae enim mattis sed consequat nulla luctus. </p>
<p>Phasellus sed velit dui, eget mollis lacus. Phasellus malesuada, tortor sed luctus mollis, tellus odio molestie tellus, nec vehicula felis dui et odio. Integer eros leo, facilisis quis molestie eget, sollicitudin non quam. </p>
</div>
</div>
</body>
</html>Agradecido!!!
Carregando comentários...