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

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

Gostei + 0

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

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

Gostei + 0

16/02/2013

Ari Lima

Vlw muito obrigado !
Responder

Gostei + 0

17/02/2013

Joel Rodrigues

Creio que a dúvida foi sanada, certo?
Então estou encerrando o tópico.
Responder

Gostei + 0

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

Aceitar