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

dreiteilige Bewegung mit Richtungsänderung in Javascript

JOhannski

JOhannski

Neues Mitglied
Hallo zusammen!

Ich stehe mal wieder vor einem Problem. Ich will mäxchen von a nach b wandern lassen wobei sie zuerst wo rauf, dann gerade aus und dann wieder runter gehen sollen. Das bewegen funktioniert schon sehr gut, nur leider nur in eine Richtung. Ich hab mir gedacht ich könnte es mit setTimeout() lösen, aber leider klappt das nicht. Hier mal mein code:

HTML: 
<html>
<head>

<style type="text/css">
@import "website.css";
</style>

<script language="JavaScript" type="text/javascript">
<!--
var ie  =(document.all)?1:0;
var DOM =(document.getElementById&&!document.all)?1:0;
var ns  =(document.layers)?1:0;

personenbilder= new Array ("http://www.html.de/images/w_n.gif","http://www.html.de/images/m_n.gif","http://www.html.de/images/m_s.gif","http://www.html.de/images/m_b.gif","http://www.html.de/images/m_c.gif");
personengeschwindigkeiten= new Array (1,1,2,2,1);
personengeschwindigkeit= new Array ();
var timer=20;

function moove(obj,startx,starty,endx,endy,stufe,ende){


 if (ie) {
 document.all["div"+obj].style.left=startx;
 document.all["div"+obj].style.top =starty;
 }
 if (DOM) {
 document.getElementById("div"+obj).style.left=startx;
 document.getElementById("div"+obj).style.top =starty;
 }
 if (ns) {
 document.layers["div"+obj].left=startx;
 document.layers["div"+obj].top =starty;
 }
 
 startx+=(endx-startx)/stufe;
 starty+=(endy-starty)/stufe;

 if(stufe>0)
 {
  setTimeout('moove('+obj+','+startx+','+starty+','+endx+','+endy+','+(stufe-1)+')',timer);
 }
 else
 {
 if (ende == 1)
 {
   if (ie) {
  document.all["div"+obj].style.display='none';
  }
  if (DOM) {
  document.getElementById("div"+obj).style.display='none';
  }
  if (ns) {
  document.layers["div"+obj].display='none';
  }
 }  
} 
}
function startmoove(obj,startx,y,endx,endy,stufe) {

X=(ns||DOM)?window.innerWidth:window.document.body.clientWidth;
 
  //rauf
  moove(obj,X*startx/100,y+50,(X*startx/100)-100,endy,stufe/8,0);
  //mitte
  seTimeout('moove('+obj+','+(X*startx/100)-50+','+y+','+(X*endx/100)+50+','+endy+','+6*stufe/8+','+0+')',(stufe/8)+1);
  //runter
  seTimeout('moove('+obj+','+(X*endx/100)+50+','+y+','+X*endx/100+','+endy+50+','+stufe/8+','+1+')',(7*stufe/8)+1);
} 

//-->
</script>

</head>
<body>




<script language="javascript" type="text/javascript">
//stiegenaufgang
var stiegenrtop = 325;
var stiegenrleft= 82;
document.write('<div id="divstiege_rechts" style="position:absolute; z-index:50; top:'+stiegenrtop+'; left:'+stiegenrleft+'%"><img src="http://www.html.de/images/stiegenaufgang.png"></div>');
document.write('<div id="divstiege_rechts" style="position:absolute; z-index:150; top:'+stiegenrtop+'; left:'+stiegenrleft+'%"><img src="http://www.html.de/images/stiegenaufgang_u.png"></div>');
	for (i=1; i<6 ; i++)
	{
	jetzsprite = Math.floor(Math.random()*personenbilder.length);
	document.write('<div id="div'+i+'" style="position:absolute; z-index:'+100+';"><img src="'+personenbilder[jetzsprite]+'"></div>');
	personengeschwindigkeit[i] = personengeschwindigkeiten[jetzsprite];
	}
  for (i=1; i<6 ; i++)
  {
  setTimeout ('startmoove('+i+',90,300, 10,300,400/'+personengeschwindigkeit[i]+')',i*1000);
  }

</script>


</body>
</html>

Hier könnt ihr auch noch sehen, wie es ausschaut:
Link

Ich weiß der code is schon ziemlich gewachsen, aber ich hoffe ihr könnt noch den Überblick behalten. Ich denke hier liegt der Fehler:

HTML: 
function startmoove(obj,startx,y,endx,endy,stufe) {

X=(ns||DOM)?window.innerWidth:window.document.body.clientWidth;
 
  //rauf
  moove(obj,X*startx/100,y+50,(X*startx/100)-100,endy,stufe/8,0);
  //mitte
  seTimeout('moove('+obj+','+(X*startx/100)-50+','+y+','+(X*endx/100)+50+','+endy+','+6*stufe/8+','+0+')',(stufe/8)+1);
  //runter
  seTimeout('moove('+obj+','+(X*endx/100)+50+','+y+','+X*endx/100+','+endy+50+','+stufe/8+','+1+')',(7*stufe/8)+1);
}

Ich kann aber leider nicht sagen was genau falsch ist :S

Bitte um Hilfe, schön langsam verzweifel ich an Javascript

Lg Johannski
 
Also für Animationen bieten sich frameworks sehr gut an.
Beispielsweise jQuery: The Write Less, Do More, JavaScript Library oder script.aculo.us - web 2.0 javascript . Damit lassen sich animationen sehr leicht erstellen.
Als Beispiel für eine Animation eines Bilds ist hier mal ein Beispiel in jquery.
PHP: 
<script type="text/javascript">
            // Erst starten wenn alles im DOM geladen wurde
            $(document).ready(function() {
              // Init
                $("#bild").css({"position" : "absolute", "left" : 300+"px", "top" : 250+"px"});
              // Bild bewegen
                $("#bild").animate({"left" : 100, "top" : 600},2000).animate({"left" : 150, "top" : 400},2000);
                
            });
                
        </script>
    </head>
    <body>
        <img src="bild.jpg" id="bild" />
    </body>

ich hab jetzt nur mal die wichtigsten parts genommen. Die 2000 ist die Dauer, die das Bild für die Animation braucht.
Hier die genaue Dokumentation:
.animate() – jQuery API
 
Vielen Dank Gilles, hab mich jetzt längere Zeit mit JQuery befasst und es war genau das richtige, was ich gesucht habe. Hier das Resultat in meiner Website, soferns dich interessiert: johannesdeml.com
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben