Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
1x bewertet
Ich liiiieeeebbbbeeeeeee Sachen zu bewegen *herz*. Wenn ich irgendwas animiert etc. bekomme, hab ich Dauergrinsen und das hier, ist der erste Schritt zum mega hyper Dauergrinsen. :))
Also zum Tutorial :)
Hier die live Demo.
Es ist noch nicht viel, vermittelt aber die Grundlage.
Als erstes brauchen wir ein Bild (gingen auch andere Sachen).
Diesem Bild gebe ich eine ID (wenn dich wer im Ausland anspricht z.B. "can i have your ID?" musst du deinen Perso zeigen.. hab ich im CoffeeShop in Amsterdam gelernt *lol*)
Die ID dient zur eindeutigen Identifikation, normalerweise hat nur ein Objekt/Elemente die gleiche ID, genau wie unser Personalausweis (viele misshandeln die ID in CSS ein bisschen).
Der Code für mein Bild sieht jetzt so aus:
Dieses Bild wollen wir jetzt ein paar Pixel nach rechts verschieben.
Dafür benutze ich eine neue Funktion
Die Funktion muss das Bild "kennen" damit wir die Position ändern können, das können wir mithilfe der ID machen.
Dafür gibt es den Befehlt getElementById().
Die ID teilen wir der Funktion mit, auf diese Information wartet die Funktion sogar (function fliegen(id)).
Dieses Vorgehen, ermöglicht uns später noch mehr Bilder mit der Funktion zuverschieben.
Damit die Funktion die Position des Bildes ändern kann, erweitern wir die Funktion.
Damit wird der Abstand des Bildes von links auf i gesetzt. Zuvor müssen wir noch über der Funktion i deklarieren mit var i = 0;, diese Variabel ist dann global.
Aber wofür ist i eigentlich?
i ist die Variabel für die Position von links.
Aber wie erhöhen wir i?
Wer jetzt denk while oder for schleife, liegt daneben (PHP lässt grüßen).
Wir nehmen einfach eine if Abfrage.
Wenn i kleiner als 100 ist, wird die Position auf i geändert und am Ende wird i noch um einen erhöht.
Tja das reicht noch nicht. Denn wenn man das Script jetzt so ausführt, bewegt sich das Bildchen immer brav um 1 Pixel weiter. *lol*
Die Funktion muss automatisch wieder aufgerufen werden.
setTimeout() ist dafür ideal.
Die Funktion fliegen() wird nach 10 Millisekunden wieder aufgerufen.
Da fliegen() immernoch wissen will, um welches Objekt es sich handelt, übergeben wir die Variable id.
Wär die If Bedingung nicht vorhanden, hätten wir eine Endlosschleife. setTimeout() ruft munter immer und immer wieder die funktion fliegen() auf.
Aber hier nur solange bis i nicht mehr kleiner als 100 ist.
Wenn i größer oder gleich 100 ist, wird i = 0 gesetzt. Damit i nicht 100 bleibt und man die Funktion mehrmals aufrufen kann.
Komplett sollte das Script so aussehen:
Wenn man Langeweile hat kann man das natürlich beliebig verändern/erweitern.
Also zum Tutorial :)
Hier die live Demo.
Es ist noch nicht viel, vermittelt aber die Grundlage.
Als erstes brauchen wir ein Bild (gingen auch andere Sachen).
Diesem Bild gebe ich eine ID (wenn dich wer im Ausland anspricht z.B. "can i have your ID?" musst du deinen Perso zeigen.. hab ich im CoffeeShop in Amsterdam gelernt *lol*)
Die ID dient zur eindeutigen Identifikation, normalerweise hat nur ein Objekt/Elemente die gleiche ID, genau wie unser Personalausweis (viele misshandeln die ID in CSS ein bisschen).
Der Code für mein Bild sieht jetzt so aus:
<img src="bild.gif" width="141" height="31" border="0" style="position:relative;left:0;" id="bild">
Dieses Bild wollen wir jetzt ein paar Pixel nach rechts verschieben.
Dafür benutze ich eine neue Funktion
function fliegen(id) {
}
Die Funktion muss das Bild "kennen" damit wir die Position ändern können, das können wir mithilfe der ID machen.
Dafür gibt es den Befehlt getElementById().
Die ID teilen wir der Funktion mit, auf diese Information wartet die Funktion sogar (function fliegen(id)).
<img src="bild.gif" width="141" height="31" border="0" style="position:relative;left:0;" id="bild" onMouseOver="fliegen('bild')">
Dieses Vorgehen, ermöglicht uns später noch mehr Bilder mit der Funktion zuverschieben.
Damit die Funktion die Position des Bildes ändern kann, erweitern wir die Funktion.
function fliegen(id) {
document.getElementById(id).style.left = i;
}
Damit wird der Abstand des Bildes von links auf i gesetzt. Zuvor müssen wir noch über der Funktion i deklarieren mit var i = 0;, diese Variabel ist dann global.
Aber wofür ist i eigentlich?
i ist die Variabel für die Position von links.
Aber wie erhöhen wir i?
Wer jetzt denk while oder for schleife, liegt daneben (PHP lässt grüßen).
Wir nehmen einfach eine if Abfrage.
function fliegen(id) {
if(i < 100) {
document.getElementById(id).style.left = i;
i++;
}
}
Wenn i kleiner als 100 ist, wird die Position auf i geändert und am Ende wird i noch um einen erhöht.
Tja das reicht noch nicht. Denn wenn man das Script jetzt so ausführt, bewegt sich das Bildchen immer brav um 1 Pixel weiter. *lol*
Die Funktion muss automatisch wieder aufgerufen werden.
setTimeout() ist dafür ideal.
function fliegen(id) {
if(i < 100) {
document.getElementById(id).style.left = i;
i++;
setTimeout("fliegen('" + id + "')",10);
}
}
Die Funktion fliegen() wird nach 10 Millisekunden wieder aufgerufen.
Da fliegen() immernoch wissen will, um welches Objekt es sich handelt, übergeben wir die Variable id.
Wär die If Bedingung nicht vorhanden, hätten wir eine Endlosschleife. setTimeout() ruft munter immer und immer wieder die funktion fliegen() auf.
Aber hier nur solange bis i nicht mehr kleiner als 100 ist.
Wenn i größer oder gleich 100 ist, wird i = 0 gesetzt. Damit i nicht 100 bleibt und man die Funktion mehrmals aufrufen kann.
Komplett sollte das Script so aussehen:
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
var i = 0;
function fliegen(id) {
if(i < 100) {
document.getElementById(id).style.left = i;
i++;
setTimeout("fliegen('" + id + "')",10);
}
else {
i = 0;
}
}
//-->
</script>
</head>
<body>
<img src="bild.gif" width="141" height="31" border="0" style="position:relative;left:0;" id="bild" onMouseOver="fliegen('bild')">
</body>
Wenn man Langeweile hat kann man das natürlich beliebig verändern/erweitern.
bluefirex
Gibts dafür auch ne Vorschau?