JQuery: Banner flutuante

Olá pessoal!

Entrando com mais um post para quem gosta de programação. ou não! rsss

Ideia do post: mostrar como se cria um simples banner – o famoso pop-up.

Comentários no próprio código.

Se mesmo assim, você tiver alguma dúvida, comente, teremos o maior prazer em responder.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery - Banner Flutuante</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 do div principal	
  var $banner	= $('#banner');
 
  $banner.animate({ left: ($conteudo /4)}, 900).show(); // aplicando efeito de deslocamento
  // para ajustar o posicionamento do banner, basta aumentar o número da divisão
  // #conteudo tem 1000px dividido por 4 = 250 - então, left será 250
 
  $(".fechar").click(function(event){
     event.preventDefault(); // previne o evento clique
     $("#banner").hide(); // ocultando o banner
  });
});
</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</a></p>
    <p>Aqui você poderá colocar texto ou imagem.</p>
  </div>
</div>
</body>
</html>

13 comentários em “JQuery: Banner flutuante

  • 16 de outubro de 2012 em 13:30
    Permalink

    Boa tarde meu caro Tiago.
    A dica de hoje veio me salvar novamente, no novo projeto que estou iniciando vou precisar de um esquema assim.
    Obrigado por compartilhar novamente.

    Resposta
  • 24 de janeiro de 2014 em 10:40
    Permalink

    Os códigos são muito bons, obrigado por compartilhar!

    Gostaria de fazer uma sugestão: Colocar um demo dos códigos em ação.

    Resposta
    • 13 de maio de 2014 em 10:20
      Permalink

      Obrigado por participar do blog e pela sugestão.

      Resposta
  • 24 de abril de 2014 em 13:48
    Permalink

    Boa tarde,
    Gostei muito do banner flutuante e gostaria de usá-lo em meu site porém, como se faz para deixar a DIV=conteudo transparente? Já fiz algumas alterações mas acaba o banner também ficando transparente. Fico agradecido se puder ajudar.
    Cordialmente,
    Luciano Teixeira
    http://www.elijukadecom.com

    Resposta
  • 31 de agosto de 2014 em 21:07
    Permalink

    amigo vou usar seu codigo boa sorte pro seu site alguma coisa tou ai para ajudar voce visitem meu site de vendas sou gente Honesta e ja agora visitem meu site http://www.hostrk.com e se precisar de ajuda so falarem…..

    ATENÇAO cuidado com um cara que eu conheço tem site vendas ele é muito ladrao site http://www.lucyradios.pt

    Resposta
  • 5 de maio de 2016 em 9:25
    Permalink

    Muito boa dica, ótimo exemplo.
    Obrigado por compartilhar

    Resposta
  • 25 de junho de 2016 em 16:19
    Permalink

    vc teria um codigo de banner flutuante que esmainhece a tela do site?

    Resposta
    • 19 de janeiro de 2017 em 15:59
      Permalink

      Prezado Francisco.

      É bem simples. Você precisa incluir este código no arquivo index do tema.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *