JQuery: Banner flutuante com contagem de tempo
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> |
Clique aqui para ver o funcionamento.
Excelente Código, funciona perfeitamente. Obrigado
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.
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).
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.
excelente dica valeu
Excelente!!!
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.
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.
Fala Fernando,
faça uma pequena alteração no código: