Javascript Bildbewegen

10/02/2013 14:12 NightsOfVarmint#1
Hallo erstmal,

Ich habe eine Frage (so wie viele vor mir auch schon). Ich wollte für einen Kumpel eine Bildanimation von Roadrunner machen, in der das Bild sich von links nach rechts bewegt und sich wieder nach links zurücksetzt, sobald es rechts angekommen ist. Aber damit es was besonderes ist, soll sich das Bild alle 5ms bewegen und es gibt 4 Einstellungen Slow (10px), Medium (20px), Fast (35px) und Like hell (50px). Die Einstellungen müssen in einem Auswahlfenster bereitstehen. Zusätzlich sollte man auch noch die Hintergrundfarbe auswählen können.

Das Bild bewegt sich bei mir bereits und die Auswahlliste habe ich schon gemacht, ich kann nur keinen Wert aus der Liste übernehmen.

Hier ist mal der Quellcode:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Animationsbeispiel</title>
<link type="text/css" rel="stylesheet" href="Layout.css">
</head>

<script language="JavaScript">
function Start()
{
Step = document.getElementById(Step);
MeinIntervall = setInterval ('moveImage()', Step + 'px')
}

function moveImage()
{
if (parseInt(MeinBild.style.left) < document.body.clientWidth - MeinBild.width)
MeinBild.style.left = parseInt(MeinBild.style.left) + Step + 'px'
else
clearInterval(MeinIntervall)
}

function Stop()
{

}
</script>
</head>

<body>
<button onclick="Start()">Go</button>
<button onclick="Stop()">Stop</button>
Geschwindigkeit:
<select id="Step">
<option value="10" selected>Slow</option>
<option value="20">Medium</option>
<option value="30">Fast</option>
<option value="50">Like hell</option>
</select>
<hr style="width=90%">
<img id="MeinBild" style="position:absolute; left:0px; top:60px;" src="Bilder/Roadrunner.gif">
</body>
</html>

Ich weiß nicht wie weit sich ein paar Leute bereit erklären würden mir damit zu helfen.

Mfg NightsOfVarmint
10/02/2013 15:24 kissein#2
generell syntaxfehler korrigiert, das div einfach gegen das bild wieder ersetzen

Generell würde ich hier empfehlen das ganze via CSS3-Keyframes zulösen, da dadurch eine flüssigere Animation gewährleistet wird. Kann heute abend schauen ob ich noch was in der Rappelkiste hab.
10/02/2013 15:38 NightsOfVarmint#3
Danke für deine Hilfe ich komme gerade einfach nicht weiter. Habe es mal soweit geschafft nur die Variabeln sind ein kleines Problem für mich.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859">
<title>Animationsbeispiel</title>
<link type="text/css" rel="stylesheet" href="Layout.css">
</head style="background:color">

<script language="JavaScript">
var color = document.getElementsByName("myColor");
function Start()
{
Step = document.getElementById(Step);
MeinIntervall = setInterval ('moveImage()', Step + 'px')
}

function moveImage()
{
if (parseInt(MeinBild.style.left) < document.body.clientWidth - MeinBild.width)
MeinBild.style.left = parseInt(MeinBild.style.left) + Step + 'px'
else
clearInterval(MeinIntervall)
}

function Stop()
{

}
</script>

<body>
<button onclick="Start()">Go</button>
<button onclick="Stop()">Stop</button>
Geschwindigkeit:
<select id="Step">
<option type="number" value="10" selected>Slow</option>
<option value="20">Medium</option>
<option value="30">Fast</option>
<option value="50">Like hell</option>
</select>
<input type="RADIO" name="myColor" value="545841" checked> Weiss
<input type="RADIO" name="myColor" value="Yellow"> Gelb
<input type="RADIO" name="myColor" value="Green"> Grün
<hr style="width=90%">
<img id="MeinBild" style="position:absolute; left:0px; top:60px;" src="Bilder/Roadrunner.gif">
</body>
</html>

Mfg NightsOfVarmint

P.S.: Wie macht man diese Spoiler
10/02/2013 15:56 kissein#4
Quote:
Habe es mal soweit geschafft nur die Variabeln sind ein kleines Problem für mich.
Anhand deines Quellcodes fehlt Grundlagenwissen.

Quote:
P.S.: Wie macht man diese Spoiler
Soetwas oder was genau ist gemeint ?
10/03/2013 09:03 NightsOfVarmint#5
Quote:
Originally Posted by kissein View Post
Anhand deines Quellcodes fehlt Grundlagenwissen.


Soetwas oder was genau ist gemeint ?
Genau diese

Das wäre geschaft so jetzt mal zum Sagt Grundlagen wissen

Ich habe vor 4 Monaten dran gearbeitet und manches beherrsche ich perfekt und anderes nicht