Problemas com um menu animado

Inufelipe · Fevereiro 2, 2008

Ola galera do Forum do Script Brasil.

Eu estou precisando da ajuda de vocês:

Eu estou criando meu portifólio e tenho

o seguinte problema, onde há o item b

não funciona corretamente, por que será ?

<HTML>
<HEAD>
<TITLE>Portifolio ShowRoom</TITLE>
<STYLE>
.k{
 background-color:#66ccff;
 margin:0px 0px 1px 0px;
 padding:2px;
 padding-left:10px;
 width:100px;
 border-right:30px solid #333333;
 cursor:pointer;
}
.l{
 background-color:#99ddff;
 margin:0px 0px 0px 0px;
 padding:0px;
 padding-left:15px;
 width:95px;
 border-right:30px solid #666666;
 cursor:pointer;
 opacity:0;
 height:0px;
}
</STYLE>
<BODY>
<DIV class="k" onmouseover="a = 1" onmouseout="a = 0" onclick="b = 1" id="i1">Item a</DIV>
<DIV class="l" id="j1">Subitem a</DIV>
<DIV class="l" id="j2">Subitem b</DIV>
<DIV class="l" id="j3">Subitem c</DIV>
<DIV class="k" onmouseover="a = 2" onmouseout="a = 0" id="i2">Item b</DIV>
<DIV class="k" onmouseover="a = 3" onmouseout="a = 0" id="i3">Item c</DIV>
<DIV class="k" onmouseover="a = 4" onmouseout="a = 0" id="i4">Item d</DIV>
<DIV class="k" onmouseover="a = 5" onmouseout="a = 0" id="i5">Item e</DIV>
<DIV class="k" onmouseover="a = 6" onmouseout="a = 0" id="i6">Item f</DIV>
&lt;script>
a = 0
b = 0
i = 10;
j = 100;
m = 6
n = 3
function start(){
    z = 0;
    while(z<m){
        z++;
        document.getElementById(("i")+(z)).style.paddingLeft=10;
        document.getElementById(("i")+(z)).style.width=100;
    }
    z = 0;
    while(z<n){
        z++;
        document.getElementById(("j")+(z)).style.height=0;
        document.getElementById(("j")+(z)).style.padding=0;
        document.getElementById(("j")+(z)).style.paddingLeft=0;
        document.getElementById(("j")+(z)).style.marginBottom=0;
        document.getElementById(("j")+(z)).style.opacity=0;
    }
    ani();
}
function set(n){
        
}
function ani(){
    z = 0;
    while(z<m){
        z++;
        if(a != z){
        if(parseInt(document.getElementById(("i"+(z))).style.paddingLeft) > 10){
        document.getElementById(("i"+(z))).style.paddingLeft = parseInt(document.getElementById(("i"+(z))).style.paddingLeft)-(1);
        }
        if(parseInt(document.getElementById(("i"+(z))).style.width) < 100){
        document.getElementById(("i"+(z))).style.width = parseInt(document.getElementById(("i"+(z))).style.width)+(1);
        }
    }
    else{
        if(parseInt(document.getElementById(("i"+(z))).style.paddingLeft) < 20){
            document.getElementById(("i"+(z))).style.paddingLeft = parseInt(document.getElementById(("i"+(z))).style.paddingLeft)+(1);
        }
        if(parseInt(document.getElementById(("i"+(z))).style.width) > 90){
            document.getElementById(("i"+(z))).style.width = parseInt(document.getElementById(("i"+(z))).style.width)-(1);
        }
    }
    }
    z = 0;
    while(z<n){
        z++;
        if(b != z){
        if(parseInt(document.getElementById(("j"+(z))).style.height) > 0){
        document.getElementById(("j"+(z))).style.height = parseInt(document.getElementById(("j"+(z))).style.height)-(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.padding) > 0){
            document.getElementById(("j"+(z))).style.padding = parseInt(document.getElementById(("j"+(z))).style.padding)-(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.paddingLeft) > 0){
            document.getElementById(("j"+(z))).style.paddingLeft = parseInt(document.getElementById(("j"+(z))).style.paddingLeft)-(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.marginBottom) > 0){
            document.getElementById(("j"+(z))).style.marginBottom = parseInt(document.getElementById(("j"+(z))).style.marginBottom)-(1);
        }
        if(parseFloat(document.getElementById(("j"+(z))).style.opacity) > 0){
        document.getElementById(("j"+(z))).style.opacity = parseFloat(document.getElementById(("j"+(z))).style.opacity)-(0.1);
        }
    }
    else{
        if(parseInt(document.getElementById(("j"+(z))).style.height) < 20){
            document.getElementById(("j"+(z))).style.height = parseInt(document.getElementById(("j"+(z))).style.height)+(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.padding) < 2){
            document.getElementById(("j"+(z))).style.padding = parseInt(document.getElementById(("j"+(z))).style.padding)+(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.paddingLeft) < 15){
            document.getElementById(("j"+(z))).style.paddingLeft = parseInt(document.getElementById(("j"+(z))).style.paddingLeft)+(1);
        }
        if(parseInt(document.getElementById(("j"+(z))).style.marginBottom) < 1){
            document.getElementById(("j"+(z))).style.marginBottom = parseInt(document.getElementById(("j"+(z))).style.marginBottom)+(1);
        }
        if(parseFloat(document.getElementById(("j"+(z))).style.opacity) < 1){
            document.getElementById(("j"+(z))).style.opacity = parseFloat(document.getElementById(("j"+(z))).style.opacity)+(0.1);
        }
    }
    }
    t = setTimeout("ani()",10);
}
start();
</SCRIPT>
</BODY>
</HEAD>
</HTML>

ou podem acesar

o link clicando aqui.

Valeu

KaKarotto · Fevereiro 2, 2008

Olha Felipe...o código é feio. Pode ser qualquer coisa, eu pessoalmente não tenho a menor paciência pra tentar debugar um código assim.

De boa, quando você procurar um código pronto desconfie dos getElementById. Pra uma coisa simples assim, se tiver mais de 2 deles, o código não presta. Além de ter váriaveis globais demais, se bem escrito pode economizar um monte de linhas...

Pega outro código cara. A solução pode ser simples, pode ser complicada...pode ser qualquer coisa...E velho...se você pensa que tem apenas um problema com ele, é por que você ainda não tentou abri-lo no iE6.

Se quiser ajuda pra procurar uns códigos prontos eu to ae o/

Akeleabraço

Entrar

Problemas com um menu animado

Pergunta

Inufelipe

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades