como fazer uma div flutante fechar apos o mouse passar por cima ?

14/02/2013

2


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 !
Responder

Posts

15/02/2013

José

Não pode ser ao invés de passar o mouse essa div fechar após um certo tempo exemplo 10s ?
Responder

16/02/2013

Ari Lima

Pode sim e é até melhor !

tem como o SR. me enviar um script pronto com exemplo dessa div ?



Vlw, obrigado !
Responder

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 .
Responder

16/02/2013

Ari Lima

Vlw muito obrigado !
Responder

17/02/2013

Joel Rodrigues

Creio que a dúvida foi sanada, certo?
Então estou encerrando o tópico.
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira