• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Animation von Graphiken

Status
Für weitere Antworten geschlossen.
C

Corraggiouno

Mitglied
ich habe folgenden code geschrieben, um eine graphik von rechts nach links einfliegen zu lassen:
Code: 
if (i<=500) {
i++;
}
if (document.getElementById) {
document.getElementById("bild1").style.left=800-i; 
}
if (document.all) {
document.all["bild1"].style.pixelLeft=800-i;
}
if (document.layers) {
document.layers["bild1"].left=800-i;
}
setTimeout("bildmove()",10);
}
In der Zeile
Code: 
setTimeout("bildmove()",10);
lege ich fest wie schnell die Animation ist.
Ich habe diesen Wert schon auf 1 gesetzt, leider ist meine Animation immer noch ziemlich langsam. Wie kann ich diesen Vorgang beschleunigen?
 
meine html-datei:
Code: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jakistart.css">
    <script language="JavaScript" type="text/javascript">
     var i=0;
     function bildmove() {
     if (i<=500)
     {
     i++;
     }
     if (document.getElementById) {
     document.getElementById("hahn").style.left=800-i;
     }
     if (document.all) {
     document.all["hahn"].style.pixelLeft=800-i;
     }
     if (document.layers) {
     document.layers["hahn"].left=800-i;
     }
     setTimeout("bildmove()",1);
     }
     </script>
  </head>
 
  <body onLoad="bildmove()">
    <div id="ebene1">
     <img src="img/hahn.jpg" width="100" height="100">
    </div>
  </body>
</html>
meine css-datei:
Code: 
#ebene1
{
 position:absolute;
 top:50px;
 right:160px;
}
Wenn ich nun meine Animation starte, bleibt die Graphik an der gleichen Stelle.
Kann mir da jemand weiterhelfen?
 
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>Willkommen bei Butterfly-Airlines</title>
<style type="text/css">
<!--
div.bild1 { position: absolute; top: 80px; left: 800px }
div.bild2 { position: absolute; top: 80px; left: 600px }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var i=0;
function bildmove() {
if (i<=600) {
i=i+20;
}
if (document.getElementById) {
document.getElementById("bild1").style.left=800-i; 
}
if (document.all) {
document.all["bild1"].style.pixelLeft=800-i;
}
if (document.layers) {
document.layers["bild1"].left=800-i;
}
setTimeout("bildmove()",1);
}


//-->
</script>
</head>
<body bgcolor="white" onLoad="bildmove()">

<div id="bild1" class="bild1"><img src="hahn.jpg" width="100" height="100" 
	border="0"  /></div>
<div id="bild2" class="bild2"><img src="firma.jpg" width="100" height="100" 
	border="0"  /></div>

</body>
</html>
Das erste Bild wird eingeflogen, das zweite hingegen, bleibt fix an seiner Stelle.
Wie kann ich mein zweites bild auch noch einfliegen lassen, so das es dann direkt neben dem ersten bild positioniert wird? Was ist an meinem Code falsch?
 
Zuletzt bearbeitet:
1. Du rufst die Funktion nur 1 mal auf.
2. versucht er dann ja auch nur bild 1 zu bewegen.
3. Wieso versuchts du das nicht zu lösen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>Willkommen bei Butterfly-Airlines</title>
<style type="text/css">
<!--
div.bild1 { position: absolute; top: 80px; left: 800px }
div.bild2 { position: absolute; top: 80px; left: 600px }
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var i=0;
function bildermove(anzahl) {
var a;
for(a = 0; a < anzahl; a++)
{
i = 0;
bildmove(a);
}
}

function bildmove(id) {
if (i<=600) {
i=i+20;
}
if (document.getElementById) {
document.getElementById("bild" + id).style.left=800-i; 
}
if (document.all) {
document.all["bild" + id].style.pixelLeft=800-i;
}
if (document.layers) {
document.layers["bild" + id].left=800-i;
}
setTimeout("bildmove()", 1);
}


//-->
</script>
</head>
<body bgcolor="white" onLoad="bildermove(2)">

<div id="bild1" class="bild1"><img src="hahn.jpg" width="100" height="100" 
	border="0"  /></div>
<div id="bild2" class="bild2"><img src="firma.jpg" width="100" height="100" 
	border="0"  /></div>

</body>
</html>
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben