nicht angemeldet
Kreisendes Div bzw. Bild
Hi Leute,
ich hoffe hier kann mir jmd helfen...
ich bin neu in Sachen JAVAScript und beise mir schon seit 48h die Zähne an einer Sache aus:
Ich möchte mehrere definierte DIVs auf den Dektop kreisen lassen:
<div id="DIVNAME" onclick="JavaFunction1(this)" style="font-size: 0px;" > <img src="/Bilder/Bild.png" width="4" height="4" alt="Bild"> </div>
Der Code für ein DIV sieht so aus und funktioniert auch:
var s1;
var s1Geschw = 2;
var s1Grad = 0;
var s1X = 600, s1Y = 418;
var s1Radius = 350;
function Init () {
s1= document.getElementById("DIVNAME");
s1.style.position = "absolute";
s1.style.top = 320 + "px";
s1.style.left = 320 + "px";
s1Kreis();
}
function s1Kreis () {
s1Grad += s1Geschw / 1000;
if (s1Grad > 360)
s1Grad = 0;
s1.style.top = Math.round(s1Y + (s1Radius * Math.cos(s1Grad))) + "px";
s1.style.left = Math.round(s1X + (s1Radius * Math.sin(s1Grad))) + "px";
window.setTimeout("s1Kreis()", 100 / s1Geschw);
}
Jetzt möchte ich gerne eine Schleife erstellen die mir das ganze für eine beliebige Anzahl von DIVs machen könnte!
Die DIVs lese ich nämlich aus einer Textdatei ein und diese wird ständig erweitert... so das eben mehrere Bilder aufm Desktop kreisen!
Hat jmd. ne Idee?
DANKE MIKE
-
Lieber Mike,
schau Dir einmal meine DOM-Version der Silly Clock an: http://www.felix-riesterer.de/main/seiten/silly_clock.html
Dort solltest Du etwas finden, das Dir weiterhilft, Dein Problem zu bewältigen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi Felix,
danke für den Hinweis... etwas viel für mich .. da schau ich lieber drüber wenn ich wirklich mit meiner Lösung fehlt schlage!
Für ein DIV funktioniert meine Lösung ja und für weitere kann ich den gleichen Code immer wieder hinzufügen... aber das soll eben automatisch in einer Schleife funktioniern...ich versuche es wieter!
DANKE
Lieber Mike,
schau Dir einmal meine DOM-Version der Silly Clock an: http://www.felix-riesterer.de/main/seiten/silly_clock.html
Dort solltest Du etwas finden, das Dir weiterhilft, Dein Problem zu bewältigen.
Liebe Grüße,
Felix Riesterer.
-
Hi Felix,
danke für den Hinweis... etwas viel für mich ..
Du könntest ein array einrichten und für jedes div Parameter speichern (x, y, ...)
Dann erstellst du eine Mini- Funktion, die mit Hilfe von set_interval() nichts anderes tut, als den Zähler auf das nächste array- Element weiterzurücken und dann an deine schon vorhandene Funktion zu übergeben.
Dort holst du dir die Werte, setzt sie weiter und bewegst das div.
LG Kalle
-
ich meine mich zu erinnern, dass Sinus- Funktionen ziemlich langsam sind.
Wenn du damit Probleme bekommst, kannst du einen (Viertel-) Kreis auch mit Hilfe vom alten Pythagoras rechnen und dann um die X- und Y- Achse spiegeln.
a2 + b2 = c2
Kalle
-
-
-
-
Hallo Mike,
Die DIVs lese ich nämlich aus einer Textdatei ein und diese wird ständig erweitert... so das eben mehrere Bilder aufm Desktop kreisen!
die Winkelfunktionen und setTimeout hast du ja bereits zum laufen gebracht.
Was noch fehlt ist ein Array, und etwas was die Objekte gleichmäßig auf die Umlaufbahn verteilt.
Die leeren <div> kannst du beim einlesen der Textdatei je nach Anzahl erzeugen, und anschließend das Array mit den Objekten initialisieren.
Ich habe etwas ähnliches mit fester Anzahl, vor langer, langer Zeit mal für kreisende Links gemacht. Bitte nicht lachen, das läuft noch mit dem 4er Netscape.Hier kannst du spicken: kreisende Links
Grüße,
Jochen
-
Lieber Mike,
Du hast ein Problem: Du verwendest globale Variablen. Das macht es sehr schwer, mehrere div-Elemente zu bewegen. Ich habe einen Artikel geschrieben, der in der Endphase vor der Veröffentlichung steckt. Dort erstelle ich zwar etwas anderes, jedoch hat das auch mit Animationen zu tun. Dort stelle ich einen objektorientierten Ansatz vor, mit dem es Dir leichter fallen sollte, Deine divs zu animieren.
Momentan findest Du den Artikel noch als Review-Version, später aber als echten SELFHTML-Artikel.
Solltest Du mit Deinem Ansatz nach der Lektüre noch immer Hilfe brauchen, komm wieder!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
Kritzeln statt texten: