Fórum como fazer uma div flutante fechar apos o mouse passar por cima ? #434675
14/02/2013
0
como fazer uma div flutante fechar apos o mouse passar por cima ?
ex.: neste link http://codigofonte.uol.com.br/codigo/aspnet/imagens/criando-graficos-em-aspnet-usando-c aparece uma div flutuante e apos passar o mouse em cima da palavra fecha a div fecha como fazer isso ?
vlw obrigado !

Ari Lima
Curtir tópico
+ 0Posts
15/02/2013
José
Gostei + 0
16/02/2013
Ari Lima
tem como o SR. me enviar um script pronto com exemplo dessa div ?
Vlw, obrigado !
Gostei + 0
16/02/2013
José
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >JQuery - Banner Flutuante com Contagem de Tempo</ title > < 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 > |
Fonte : [url]http://www.linhadecomando.com/jquery/jquery-banner-flutuante-com-contagem-de-tempo[/url]
Ai está amigo, espero que esse exemplo posso lhe ser útil.
qualquer duvida post que tentemos lhe ajudar .
Gostei + 0
16/02/2013
Ari Lima
Gostei + 0
17/02/2013
Joel Rodrigues
Então estou encerrando o tópico.
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)