JQuery: Banner flutuante com contagem de tempo

16 de outubro de 2012 admin

Este post é um complemento do anterior.

O banner sumirá automaticamente após 8 segundos.

Usaremos as funções:
– clearInterval()
– setInterval()

<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 /4)}, 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>

<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 /4)}, 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>

Clique aqui para ver o funcionamento.

9 comentários sobre “JQuery: Banner flutuante com contagem de tempo”

Eduardo

17 de setembro de 2013 em 2:54
Link permanente

Excelente Código, funciona perfeitamente. Obrigado
Resposta
muito obrigado

24 de junho de 2014 em 20:40
Link permanente

obrigado cara pela força,voce por acaso tem um com a mesma funcionalidade que dá pra alterar a imagem de fundo? desde ja agradeço pela força,funcionou muito bem.
Resposta
Diego

26 de fevereiro de 2015 em 13:15
Link permanente

Gostaria de saber como setar um timeout para fechar este banner em 10 segundo por exemplo. ou uma função para que ele não seja mais exibido em determinada máquina (usando cookies).
Resposta
Diego

26 de fevereiro de 2015 em 14:46
Link permanente

Desculpe, não fui claro em meu comentário anterior. Precisaria saber como exibir a contagem regressiva para fechar a janela ou como dar a opção de não exibir mais este pop-up para um cliente.
Resposta
elivelton

18 de dezembro de 2015 em 21:28
Link permanente

excelente dica valeu
Resposta
Tiago

13 de outubro de 2017 em 15:53
Link permanente

Excelente!!!
Resposta
Fernando

22 de março de 2018 em 9:27
Link permanente

Pessoal como faço para fechar essa div ao clicar no nome, ( Clique aqui para fechar )
link da imagem: https://i.imgur.com/BmpYmqgg.png

Esse é o meu código, já tentei de tudo más não consigo fazer com que ele feche ao clicar na imagem.
Resposta

Eu consegui fechar a div, agora preciso colocar um delay pode me ajudar? não quero que seja instantâneo, quero que apareça depois de alguns segundos.

Resposta

Fala Fernando,

faça uma pequena alteração no código:

setTimeout(function(){
// deslocamento do banner
$banner.animate({ left: ($conteudo /4)}, 900).show();
// chamada da funcao que fará a contagem
contador();	
// setando o tempo de execução do banner
setTimeout(fechar, $tempo*1000);
}, 4000);

Você pode gostar também

JQuery: Exibindo menu conforme resolução do monitor

JQuery: Habilitar e desabilitar JQueryUI DatePicker

JQuery: Verificar se um elemento possui uma classe

9 comentários sobre “JQuery: Banner flutuante com contagem de tempo”

Deixe um comentário Cancelar resposta