como fazer uma div flutante fechar apos o mouse passar por cima e ser armazenada em cookie depois de 24 horas abrir de novo?

05/08/2015

tipo assim so q no codigo abaixo falta a fun��o do cookie para q o banner so volte a funcionar depois de 24 horas

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery - Banner Flutuante com Contagem de Tempo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $conteudo = $('#conteudo').width(); // largura total
var $banner = $('#banner'); // objeto banner
var $tempo = 8; // milisegundos
var $intervalo;

// evento click
$(".fechar").click(function(event){
event.preventDefault();
fechar(); // chamada a fun��o
});

// funcao que fechar� o banner
function fechar(){
$("#banner").hide();
}

// funcao para contagem
function contador(){
$intervalo = window.setInterval(function() {
var tempoContagem = $("#contador").html();
var atualizaContagem = eval(tempoContagem) - eval(1);
$("#contador").html(atualizaContagem);

// chegando em zero o contador � parado
if(atualizaContagem == 0){
pararContagem();
}
}, 1000);
}

// funcao para limpar o contador
function pararContagem(){
window.clearInterval($intervalo);
}

// deslocamento do banner
$banner.animate({ left: ($conteudo /10)}, 900).show();
// chamada da funcao que far� a contagem
contador();
// setando o tempo de execu��o do banner
setTimeout(fechar, $tempo*1000);
});
</script>
<style type="text/css">
body{ font-family:Arial, Helvetica, sans-serif }
#conteudo{
margin:0 auto;
width:1000px;
height:800px;
background-color:#DDD;
}
#banner{
position:absolute;
top:50px;
left:0;
float:left;
width:180px; /* largura */
height:180px; /* altura */
background-color:#0066CC; /* cor de fundo */
-webkit-border-radius: 8px; /* canto arredondado */
-moz-border-radius: 8px; /* canto arredondado */
border-radius: 8px; /* canto arredondado */
z-index:999999; /* posicionando sobre os demais */
display:none;
color:#FFFFFF;
}
#banner a{ color:#FFFFFF;text-decoration:none }
#banner p { padding: 5px 10px 0; }
p.link{ text-align:center;clear:both }
#fechar{
position:relative;
float:right;
width:20px;
height:20px;
background-color:#000000;
color:#FFFFFF;
text-align:center;
}
</style>
</head>
<body>
<div id="conteudo">
<div id="banner">
<div id="fechar"><a href="#" title="Fechar" class="fechar">X</a></div>
<p class="link"><a href="#">JQuery - Banner Flutuante com Contador</a></p>
<p>Este banner sumir� em <span id="contador">8</span> segundos.</p>
</div>
</div>
</body>
</html>

Vandenberg

Curtir t�pico + 0

Responder