Bei Canvas bring ich aber derzeit nur zusammen, dass eine Kugel von links nach rechts wandert und dann stehn bleibt
Beiträge von Pseimen
-
-
Hallo
Ja so funktionierts ganz gut, aber wenn man was öffnet nebenbei (pop up) oder kurz auf einen anderen Tab wechselt und wieder zurück, dann sind einige kugeln ganz dich aneinander und es entsteht ein großes loch :-O
mit Canvas wärs mir sowieso am liebsten, weil das Schema auch mit Canvas gezeichnet wurde, dann wird das etwas einfacher
Weißt du auch wie ich es in Javascript so programmieren kann, dass die küglchen nur wenn Wert XY > xy ist angezeigt werden? :-O
Danke für deine unterstützung bei diesem Projekt, du bist mir eine große Hilfe
LG
-
Hallo
So, hat etwas gedauert, aber hab mich jetzt etwas mit Javascript rumgespielt, da das ganze mit CSS sehr sehr unstabil läuft :-O
Es funktioniert auch, dass eine Kugel in Dauerschleife von links nach rechts fliegt
Aber wie kann ich es jetzt machen, dass diese Funktion nach weiß ich nicht 1 sekunde wieder von vorn startet jedoch der vorherige Durchlauf nicht unterbrochen wird? Sprich wie schaffe ich es, dass nun mehrere "Kügelchen" hintereinander immer und immer wieder den Bildschirm durchlaufen? :-O
Danke schon im Voraus
Anbei der Code
HTML<div id="energieFluss" width="900px" height="500px" color="red"> <img id="bullet" src="http://www.heideman-store.de/images/artikel/kugel-blausaphirmatt_2_91.jpg" height ="25" width= "25"> </div>
CSS
Alles anzeigen#energieFluss { width: 900px; height: 500px; border: 5px black solid; overflow: hidden; } #bullet { position: relative; left: 50px; top: 25px; }
JavaScript
Alles anzeigenvar Bullet = document.querySelector ("#bullet"); var currentPos = 0; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function moveBullet () { currentPos += 5; Bullet.style.left = currentPos + "px"; if (Math.abs(currentPos) >= 900) { currentPos = -500; } requestAnimationFrame(moveBullet); } moveBullet ();
-
ja genau bezog sich auf diese Frage,
Perfekt, dass hab ich bereits so gelöst mit einer Standardgröße von 980px. Die Automatische Bildschirmanpassung erreiche ich dann mittels Javascript?
LG
-
Super Danke für die Antwort,
Ich werd mich morgen mal etwas Spielen und ausprobieren welche Möglichkeit die bessere für mich ist
Ja genau, in weiterer Folge auf jeden Fall. hast du noch Tipps was ich hierbei beachten sollte?
LG
-
Hallo,
Ich bin neu hier im Forum und würde mich auch eher als Anfänger im Bereich der html, css, javascript programmierung sehen.
Ich soll jedoch für die Arbeit unsere Website überarbeiten, grundsätzlich komm ich bis jetzt ganz gut voran nur hab ich jetzt ein zwei Probleme bei denen ich nicht weiterkomme und auch bei eine Webrecherche nicht wirklich fündig geworden bin. Ich hoffe ihr könnt mir weiterhelfen.1.Problem
Die besagte Website dient als Monitoring stelle für eine Photovoltaik-Anlage, welche die aktuellen Messwerte mittels Phyton-Script ausließt.
Nun ist gewünscht, dass je nach aktueller Leistung sozusagen "Stromflusskügelchen" in die jeweilige Richtung fließen. Damit man sich das besser Vorstellen kann was ich meine anbei ein Bild der Fronius Solar-Web-Page, so ungefähr soll das mit de kügelchen aussehen (fließen sollen sie hald, also animiert sein)[Blockierte Grafik: https://i-magazin.at/media/k2/galleries/5694/SE_PI_Fronius_Solutions_PlusXAward_4.jpg]
Das 2te Problem mit dem ich konfrontiert bin, ist, dass ich ein Popup-Fenster erstellen möchte welches sich beim klicken auf einen Messwert öffnet und indem eine Interaktion möglich ist (weitere Messwerte sollen drin stellen, ein graph mit Link), das soll ungefähr so aussehen wie in dem angehängten Bild rechts oben ersichtlich.
Ich hoffe ihr könnt mir helfen,
vielen Dank bereits im Voraus
LG Simon