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> |
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.
Valeu pela dica, ajudou muito!!!
Velho! pode crê, mandou muito bem.
Obrigado por compartilhar.
Obrigado por ajudar com os códigos.
Vlw!
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.
Obrigado por participar do blog e pela sugestão.
Boa tarde Tiago, meu nome é Arthur, adorei o script, estou precisando de um banner rotativo em jquery, até achei um legal, mas testei e não consigo faze-lo.
Teria algum post nesse sentido?
Fala Arthur,
indico estes 2 sites
https://slidesjs.com/
https://kenwheeler.github.io/slick/
Qual que vc tentou usar?
Excelente post, me ajudou muito na Minha Loja Virtual.
http://www.hardsign.com.br
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
amigo vou usar seu codigo boa sorte pro seu site alguma coisa tou ai para ajudar voce
Muito boa dica, ótimo exemplo.
Obrigado por compartilhar
vc teria um codigo de banner flutuante que esmainhece a tela do site?
queria saber como se colocar esse bunner no wordpress??
Prezado Francisco.
É bem simples. Você precisa incluir este código no arquivo index do tema.