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

Ari Lima

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar