como fazer uma div flutante fechar apos o mouse passar por cima ?
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
Curtidas 0
Respostas
José
14/02/2013
Não pode ser ao invés de passar o mouse essa div fechar após um certo tempo exemplo 10s ?
GOSTEI 0
Ari Lima
14/02/2013
Pode sim e é até melhor !
tem como o SR. me enviar um script pronto com exemplo dessa div ?
Vlw, obrigado !
tem como o SR. me enviar um script pronto com exemplo dessa div ?
Vlw, obrigado !
GOSTEI 0
José
14/02/2013
<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 .
GOSTEI 0
Ari Lima
14/02/2013
Vlw muito obrigado !
GOSTEI 0
Joel Rodrigues
14/02/2013
Creio que a dúvida foi sanada, certo?
Então estou encerrando o tópico.
Então estou encerrando o tópico.
GOSTEI 0