How do I get my function to restart?
Question
This page automatically calls the function moveit() on load. moveit() moves an image (a line) up and down. I want this to happen continuously; however, I do not know how to make my function restart. Currently, I am making the page reload every time the line reaches the bottom of the page. This takes a lot of time though, so I'd like to restart the function instead. Thanks!
<html manifest="manifest.appcache">
<body onload="moveit(8)">
<img style="margin: 0 auto;" src="http://media.tumblr.com/593368ddaf4ad655258a076f959856fa/tumblr_inline_mgmuspje6G1re2ao1.bmp"></img>
<style type="text/css">
.moveimage { position:absolute; right:0; bottom:0; z-index:2 }
}
</style>
<script language="JavaScript">
function moveit(spot)
{
if (document.getElementById("image1"))
{
var picture=document.getElementById("image1").style;
if (spot<328)
{
picture.bottom= spot;
spot+=3.7;
setTimeout('moveit('+spot+')',15);
}
if (spot>328)
{
picture.top= spot;
spot+=1.25;
setTimeout('moveit('+spot+')',10);
}
if (spot>650)
{
window.location.reload();
}
}
}
</body>
</script>
</html>
3 answers
solution1
2 2013-01-14 22:15:47
Just change the line
window.location.reload();
to
picture.bottom = 0; // reset
picture.top = ""; // reset
moveit(); // and start over again
solution2
0 2013-01-14 22:14:14
You could replace this line:
window.location.reload();
with something like:
setTimeout(function() { moveIt(8); }, 10);
Where the parameter 8 is the same as what you used from your onload handler - or of course you could set it to any other value as appropriate.
solution3
0 2013-01-14 22:17:27
This event handler will fire on html scroll event.
$('html').scroll(function(){
//do something
})
You can also use it on any container with overflow:scroll or overflow:auto .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.