Ir para conteúdo
Fórum Script Brasil
  • 0

Mover objetos com setTimeout


Maurison Junior

Pergunta

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:

<script language="JavaScript">

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>

<input type="button" id="play" name="botao" value="inicar" onclick="iniciar()">

<img src="img.jpg" id="img1" style="position:relative;left:0px;">

</body>

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

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0

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

Link para o comentário
Compartilhar em outros sites

  • 0

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:

Link para o comentário
Compartilhar em outros sites

  • 0

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);
    }

}

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...