• 0
Sign in to follow this  
Maurison Junior

Mover objetos com setTimeout

Question

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!

Share this post


Link to post
Share on other sites

5 answers to this question

Recommended Posts

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

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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);
    }

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this