• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

zero-cool

Deslizamento

1 mensagem neste tópico

Boas,

Fiz este pequeno código para alteração do tamanho de uma DIV. Para abrir ele funciona, mas para fechar tem exactamente o efeito contrário. Em vez de fechar, aumenta. :|

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript">
    <!--
      function Abrir(k) {
        item = document.getElementById(k);
        item.style.display = "block";
        
        tamanho = item.offsetWidth;
        item.style.setProperty('width',0,null);
        
        t = setTimeout("DeslizaUP('"+k+"',"+tamanho+")", 20); // 1 second
        
      }
      
      function DeslizaUP(k,max) {
        item = document.getElementById(k);
        item.style.setProperty('width',(item.offsetWidth+1),null);
        if (item.offsetWidth < max) {
          t = setTimeout("DeslizaUP('"+k+"',"+max+")", 20); // 1 second
        }
      }
      
       function Fechar(k) {
        item = document.getElementById(k);
        
        tamanho = item.offsetWidth;
        
        t = setTimeout("DeslizaDOWN('"+k+"',"+tamanho+")", 20); // 1 second
        
      }
      
      function DeslizaDOWN(k,max) {
        item = document.getElementById(k);
        item.style.setProperty('width',(item.offsetWidth-1),null);
        if (item.offsetWidth > 0) {
          t = setTimeout("DeslizaDOWN('"+k+"',"+max+")", 20); // 1 second
        }
        else {
          item.style.display = "none";
          item.style.setProperty('width',max,null);
        }
      }
      
      
    // -->
    </script>
    
    <style>
    <!--
      .head {
        background-color: #FF0000;
        text-align:center;
        width:100px;
        height:90px;
        border:1px solid #0075B2;
        display:none;
      }
    -->
    </style>

  </head>
  <body>
    <a onmouseover="javascript:Abrir('fff')" onmouseout="javascript:Fechar('fff')">kjrgkernfkjrnfjek</a>
    <div id="fff" class="head">
      bububu
    </div>
  </body>
</html>

Abraços,

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora