nicht angemeldet
Hi,
ja genau, es ist ja auch für so ein spiel, hehe. nur wie mache ich das mit der großen grafik, das hört sich interessant an.
Tja ... so?
<script>
// haelt Referenz auf das Bild
var img = null;
// initialisiert das ganze
function get_moving()
{
// Referenz nur einmal holen
if(img == null)
img = document.getElementById('img');
// jede Millisekunde die move-Operation aufrufen
// evtl. weniger oft aufrufen, dafuer weiter verschieben, z.B. jede 10 Millisekunde, dafuer um 50 Pixel verschieben ..?
window.setInterval("move_background()", 1);
}
// move-Operation
function move_background()
{
// Abstand von oben ermitteln
marginTop = parseInt(img.style.marginTop);
// ganz runter gescrolled => wieder noch oben setzen
if(marginTop == 0)
marginTop = -1920;
// pro Aufruf 10 Pixel nach unten ziehen
img.style.marginTop = (marginTop + 10) + 'px';
}
</script>
</head>
<!-- bei onload initialisieren -->
<body onload="get_moving();">
<!-- ein container, muss nicht sein, is aber besser, sag ich mal, da sich sonst das "margin-top:-1920px;" auf den body bezieht ... ginge auch, aber mei ... -->
<div id="container" style="border:red solid 2px; width:640px; height:480px; overflow:hidden; margin-left:200px;">
<!-- das Bild, das -1920 (= -[480 * 4]) Pixel nach oben verschoben ist -->
<img id="img" src="rain.jpg" style="margin-top:-1920px;">
<div>
</body>
</html>
Ich habe dein Site genommen, eine Screenshot gemacht, und das Bild 4 mal untereinander kopiert.
Das kann man noch alles schoener machen, aber vom Prinzip her funktionierts mal.
Der aufruf ist der Prozesso-Killer, wes wegen es auch ruckeln kann ...
window.setInterval("move_background()", X);
An dem X, und an dem ...
img.style.marginTop = (marginTop + Y) + 'px';
... Y musst schrauben, dass es fluessig und huebsch is.
Viel Erfolg!