Mover objetos com setTimeout

Maurison Junior · Junho 3, 2012

Bom dia a Todos.

Estou tentando fazer imagens sair da direita,ir ate a esquerda da pagina,descer uma quantidade de pixels e voltar para direita!

alguém pode me ajudar na parte de voltar para a direita?

A parte do codigo que volta para a direita esta sendo executado antes de tudo,e teria que ser executado por ultimo e tambem não estou conseguindo colocar o codigo para rodar corretamente.

o que tenho é isto:

function iniciar(){

for(var i = 0; i <= 1175; i++){

ml = i+'px';

tm = i;

setTimeout("document.getElementById('img1').style.left='"+ml+"'", i);

}

for(var d = 0; d < 350; d++){

ml = d+'px';

tm = i+d;

setTimeout("document.getElementById('img1').style.top='"+ml+"'", tm);

}

for(var v = 1175; v >= 0; v--){

ml = v+'px';

v = ml-1;

tm = v-i;

alert (v);

setTimeout("document.getElementById('img1').style.right='"+ml+"'", tm);

}

</script>

</head>

<body>

</body>

Gostaria que alguém ajudasse a desvendar essa onça ai!obrigado!

fiote · Junho 4, 2012

tm = v-i;

Seu problema está aqui. Quando o código chega nessa parte, i vale 1175. O v começa em 1175. Logo, o tm (tempo) vale 0 e é executado instantaneamente. Mude para:

tm = i + d + (1175-v);

Dica: você está SUPONDO que todo mundo que acessar sua página estará usando uma resolução de 1175+ width. Não é uma boa idéia...

Maurison Junior · Junho 4, 2012

Entendi o que quiz dizer,porém a solucao que me passou,continuou executando primeiro o ultimo "for" antes dos outros,

a questao da resolucao 1175+width,é que a imagem não "sumiria" no browser,mas estamos trabalhando nessa questao para desenvolver algo que faça ele meio que "reconhecer" o fim da linha e executar os comandos seguintes!

Se alguém conseguir me ajudar nesse probleminha da sequencia eu ficarei grato!

Desde já agradenco a atencao que me foi dada! :rolleyes:

fiote · Junho 4, 2012

Ok, fui testar seu script e vi alguns vários problemas.

ml = v+'px';
v = ml-1;

Assim que você colocou esse 'px' ae, ml deixou de ser um valor numérico. Portanto você NÃO consegue substrair 1 dele (a não ser que você use parseInt(ml)) e é por isso que o seu alert dava NaN (not a number). Outra coisa: 1º FOR:

setTimeout("document.getElementById('img1').style.left='"+ml+"'", i);

3º FOR:

setTimeout("document.getElementById('img1').style.right='"+ml+"'", tm);

Um elemento não pode ter atributos left e right ao mesmo tempo. Left é a distância até a borda da esquerda (duh) enquanto Right é a distância até a borda da direita. Quando ele chega no terceiro FOR, o elemento já está com o atributo Left setado. Isso faz ele ignorar o atributo Right... apesar de que isso parece um erro de digitação, porque funciona bem usando left nos dois. Tenta assim:

function iniciar(){

    distanciaHorizontal = 1175;
    distanciaVertical = 350;

    for(var i = 0; i <= distanciaHorizontal; i++){
        ml = i+'px';
        tm = i;
        setTimeout("document.getElementById('img1').style.left='"+ml+"'", i);
    }


    for(var d = 0; d < distanciaVertical; d++){
        ml = d+'px';
        tm = i+d;
        setTimeout("document.getElementById('img1').style.top='"+ml+"'", tm);
    }

    for(var v = distanciaHorizontal; v >= 0; v--){
        ml = v+'px';
        v = parseInt(ml)-1;
        tm = i + d + (distanciaHorizontal-v);
        setTimeout("document.getElementById('img1').style.left='"+ml+"'", tm);
    }

}

Maurison Junior · Junho 4, 2012

É,não deu certo,ate tentei fazer algumas modificacoes,porem não rodou! :(

Maurison Junior · Junho 4, 2012

Consegui solucionar o problema,tava faltando um ";"!!

Entrar

Mover objetos com setTimeout

Pergunta

Maurison Junior

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

fiote

Link para o comentário

Compartilhar em outros sites

Maurison Junior

Link para o comentário

Compartilhar em outros sites

fiote

Link para o comentário

Compartilhar em outros sites

Maurison Junior

Link para o comentário

Compartilhar em outros sites

Maurison Junior

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades