como fazer uma div flutante fechar apos o mouse passar por cima ?
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
Posts
15/02/2013
José
16/02/2013
Ari Lima
tem como o SR. me enviar um script pronto com exemplo dessa div ?
Vlw, obrigado !
16/02/2013
José
<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 /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 .
17/02/2013
Joel Rodrigues
Então estou encerrando o tópico.
Clique aqui para fazer login e interagir na Comunidade :)