Multi - Layer Scrolling Left

Reset











<script type="text/javascript">
// Realised by Jeff
// www.huntingground.freeserve.co.uk
Layer_Num=6 // number of layers
Interval=100 // interval before next layer scroll
Limit=10 // layer stop position
Step=50 // layer increment size, increase for faster scroll
Count =1;
ani=""
speed=""

PosX = new Array();

function setup(){ // get default start position based on first layer
X=parseInt(document.getElementById("oDIV1").style.left)
Y=parseInt(document.getElementById("oDIV1").style.top)
init()
}

function init(){
clearTimeout(ani)
for (i = 0; i < Count-1; i++) {
PosX[i] = parseInt(document.getElementById("oDIV"+i).style.left) // x initial position
}
animate()
if(Count>Layer_Num){
Count=Layer_Num
clearTimeout(speed)
}
else{
speed=setTimeout("init()",Interval)
}
Count++
}

function animate() { 
clearTimeout(ani)
for (p = 0; p < Count-1; p++) {
PosX[p] = parseInt(document.getElementById("oDIV"+p).style.left)
PosX[p] -= Step
if (PosX[p] <Limit+1) { // when layer reaches limit, keep layer at limit
PosX[p] = Limit+1
}
document.getElementById("oDIV"+p).style.left = PosX[p] // x position
}
ani=setTimeout("animate()", 50); // speed
if (PosX[Layer_Num-1] ==Limit+1) { // when last layer reaches limit, stop animation
clearTimeout(ani)
}
}

function oreset(){ // reset layers back to default position
for (p = 0; p < Count-1; p++) {
document.getElementById("oDIV"+p).style.left =X
PosX[p] = 0
}
Count=1
setTimeout("init()", 1000)
}
setTimeout("setup()", 1000)

</script>

<style>
width:150;
height:30;
background-image:url(image.jpg);
text-align:center;
</style>

<div id="oDIV0" style="position:absolute;left:900;top:100"></div>
<div id="oDIV1" style="position:absolute;left:900;top:130"></div>
<div id="oDIV2" style="position:absolute;left:900;top:160"></div>
<div id="oDIV3" style="position:absolute;left:900;top:190"></div>
<div id="oDIV4" style="position:absolute;left:900;top:220"></div>
<div id="oDIV5" style="position:absolute;left:900;top:250" onclick="oreset()"><b>Reset</b></div>