mercredi 18 mars 2015

JS - Moving an image, pausing for set time, then moving image back

I've hit a wall...one last try. I want to create a new function like fly() that will reverse what fly() does after pausing for 20 seconds. The original fly() function moves an image offscreen horizontally from the left to the center of the page, where the image remains static. I'd like to create a function that moves the image back offscreen after 20 seconds of it remaining static. The "after 20 seconds" part is giving me the most grief. If you could show me what a new function would look like or an 'else' addition to the current function that would be great. If possible, keep it simple based on what I have so that I understand. Thanks.



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

var x = -500;
var y = 100;


function fly(val) {

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

}
</script>

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

</style>


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

Aucun commentaire:

Enregistrer un commentaire