JS - déplacer une image horizontalement après une période de temps

Tout allait bien jusqu'à maintenant. Je veux inverser cette fonction hor() après 20 secondes. La fonction hor() originale saisit une image hors écran et la déplace horizontalement de la gauche vers le centre de la page. Je voudrais créer une fonction qui fait le contraire après 20 secondes. La partie "après 20 secondes" me donne le plus de chagrin. Si vous pouviez me montrer à quoi ressemblerait une nouvelle fonction ou une addition 'else' à la fonction actuelle, ce serait génial. Merci.JS - déplacer une image horizontalement après une période de temps

<script language="JavaScript" type="text/JavaScript"> 

var x = -500; 
var y = 100; 


function hor(val) { 

if (x <= 500){ 
x = x + val;  
document.getElementById("pos").style.left = x + "px"; 
setTimeout("hor(5)", 10); 
} 

} 
</script> 

<style type="text/css"> 
<!-- 
#pos { 
position: absolute; 
left: -500px; 
top: 100px; 
z-index: 0; 
} 

</style> 


<body onLoad="setTimeout('hor(5)',5000)"> 
<div id="pos"> 
<a href="#"><img src="image.jpg"></a> 
</div>

Source

2015-03-18 new recruit 21

Il semble qu'il y ait une erreur JS dans la console, veuillez vérifier – stanze

Fixe, je pense. –

Peut-être que vous pourriez essayer de changer le script à ceci:

// Define variables 
var x = -500, 
    y = 100, 
    direction = 1; 

// Function which moves "pos" element 
function hor(val) { 
    // Move by specified value multiplied by direction 
    x += val * direction; 

    if(x > 500){ 
    x = 500; 
    // Reverse direction 
    direction = -1; 
    } else if(x < -500){ 
    x = -500; 
    // Reverse direction, once again 
    direction = 1; 
    } 
    // Move element 
    document.getElementById("pos").style.left = x + "px"; 

    // Continue loop 
    setTimeout("hor("+val+")", 10); 
}

Ce code continuera à déplacer l'élément pos par la valeur spécifiée jusqu'à x supérieure à 500, à quel point il direction passer, puis continuez jusqu'à ce que x atteigne -500, et ainsi de suite.

EDIT:

Ce code corrigera cette question avec 20 secondes (je pensais que la chose 500 pixel calculé à 20 secondes, lol).

// Define variables 
var x = -500, 
    y = 100, 
    direction = 1; 
    firstCall = true; 
    timeElapsed = 0; 

// Function which moves "pos" element 
function hor(val) { 
    // Don't let the first call count! 
    if(!firstCall)timeElapsed += 10; 
    else firstCall = false; 

    if(timeElapsed >= 2000){ 
    // Reverse direction 
    direction *= -1; 
    timeElapsed = 0; 
    } 

    // Move by specified value multiplied by direction 
    x += val * direction; 

    // Move element 
    document.getElementById("pos").style.left = x + "px"; 

    // Continue loop 
    setTimeout("hor("+val+")", 10); 
}

Source

2015-03-18 04:39:27 GrandonBroseph

Merci, c'est mieux. Cependant, j'ai besoin de la fonction pour inverser seulement après 20 secondes. –

Essayez ceci. Ici, l'img est déplacé horizontalement et après un certain temps, il revient à sa position d'origine.

<script> 
     var x = -500; 
     var y = 100; 
     var op; 
     function hor(val) { 
      if (x <= 500 && x>=-500) { 
       x = x + val; 
       document.getElementById("pos").style.left = x + "px"; 
       setTimeout(function(){hor(val);},10); 
      } 
     } 
     $(document).ready(function(){ 
      setTimeout(function(){hor(5);},1000); 
      setInterval(function(){ 
       setTimeout(function(){hor(-5);},1000); 
      },2000); 
     }); 
    </script>

J'ai changé les timings à des fins de test seulement, vous pouvez le changer.

Source

2015-03-18 04:44:55 itssajan

Génial, cela aide. Merci. –

@ newrecruit21 Si ma solution fonctionne pour vous, pouvez-vous accepter cette réponse? – itssajan

JS - déplacer une image horizontalement après une période de temps

Répondre

Questions connexes