PureBoard

Verfasst: **14.06.2008 12:59**

Hallo PB-Forum !!!

Wer von euch kennt sich mit JavaScript aus und würde mir eventuell dabei helfen, einen Grafikeffekt in meine Website einzubauen??? Ich würde gerne in dem blauen Hintergrundbereich der Navigationsleiste aufsteigende Blubblerblasen haben, habe allerdings keinen Ahnung, wie ich das Ganze mit JavaScript angehen soll. Hab bereits einige Tutorials durch, aber immer noch keinen blassen Schimmer. Deswegen wäre es schön, wenn mir jemand helfen würde. Ein Grundgerüst würde mir schon weiterhelfen bzw. ein paar Tipps, wie ich zum Beispiel eine Grafik lade und in dem gewünschten Bereich anzeige und wie ich deren Position ändern kann.

meine Seite findet ihr unter: www.adsoftware.kilu.de

Falls ihr meinen HTML-Quellcode dafür benötigt, schicke ich ihn gerne per E-Mail zu euch.

Vielen Dank schonmal im Voraus
Viele Grüsse

Alexander

Verfasst: **14.06.2008 13:05**

auf dieser Seite findest du viele JS Code, unter anderen auch Blasen die nach oben steigen:

http://www.traci.de/javascript/

Blasen sind hier:
Unter Effekte , schwarze Blasen

Verfasst: **14.06.2008 13:31**

Danke für den Link !!! Komischerweise wird jedoch nicht das Script angezeigt, wenn ich unter Effekt-->schwarze Blasen nachschaue.....nur der Hinweis, dass das Blasen.gif dafür benötigt wird....aber es ist kein Script zu sehen....

Verfasst: **14.06.2008 13:34**

Darie hat geschrieben:Danke für den Link !!! Komischerweise wird jedoch nicht das Script angezeigt, wenn ich unter Effekt-->schwarze Blasen nachschaue.....nur der Hinweis, dass das Blasen.gif dafür benötigt wird....aber es ist kein Script zu sehen....

Rechtsklick -> Quelltext anzeigen.

Aber das funktioniert sowieso nicht richtig mit Firefox.

Verfasst: **14.06.2008 14:15**

Liegt daran das FF andere PositionsFunktionen hat -.-

ich versuche mal umzuschreiben....

Verfasst: **14.06.2008 14:21**

Die obere und untere Buttonleiste wird auch nur im IE richtig dargestellt, im
FF funktioniert sie zwar, aber man kommt garnicht erst auf die Idee, das dort
nen Knopf ist

Verfasst: **14.06.2008 14:38**

OK hier mal die erste Version

sieht meiner Meinung nach scheiße aus ^^ aber kann man ja noch verbessern.

Musst nur noch die Grafikpath ändern :

FUNZT IN FF UND IE

Code: Alles auswählen

<html>
 <body bgcolor="000000">

  <script language="JavaScript">

   var ImageURL = "Bild.PNG";

   var Blasen = 20;

   var PosX=new Array();
   var PosY=new Array();

   var Height=200;
   var Width=200;
   var Top=0;
   var Left=0;
   
   for (i=0;i<Blasen;i++)
    {
    PosX[i] = Math.round(Math.random()*Width);
    PosY[i] = Math.round(Math.random()*Height);
    document.write('<img id="Blase'+i+'" style="position:absolute;top:'+PosY[i]+'px;left:'+PosX[i]+'px" src="'+ImageURL+'">');
    }

   function Animation()
    {
    for (i=0;i<Blasen;i++)
     {
     PosY[i]+=-1;
     PosX[i]+=Math.round(Math.random()*2-1);
     if (PosX[i] < 0)
      {
      PosX[i]=0;
      }
     if (PosX[i] > Width)
      {
      PosX[i]=Width;
      }
     if (PosY[i] < 0)
      {
      PosY[i]=Height;
      }
     Value = Math.sin(PosY[i]/Height*Math.PI)*100;
     document.getElementById("Blase"+i).style.top = PosY[i]+Top;
     document.getElementById("Blase"+i).style.left = PosX[i]+Left;
     document.getElementById("Blase"+i).style.filter = "alpha(opacity="+Value+");";
     document.getElementById("Blase"+i).style.opacity = ""+(Value/100)+";";
     }
    setTimeout('Animation()',10);
    }

   Animation();

  </script>
 </body>
</html>

Verfasst: **15.06.2008 21:39**

Die obere und untere Buttonleiste wird auch nur im IE richtig dargestellt, im
FF funktioniert sie zwar, aber man kommt garnicht erst auf die Idee, das dort
nen Knopf ist Mr. Green

Also bei mir funktionierte die Seite in beiden Browsern, zumindest als ich sie geschrieben habe. (Auch nach dem Update des Firefox auf Version 3.0)
Hab gerade festgestellt, das mein IE mal wieder kurz nach dem Starten abstürzt, naja, egal....

@Stargate : danke für die vorlage...hab das script eingefügt und es funktioniert, nur das die Blasen noch nicht in im blauen Balken aufsteigen und das Script ab und zu zwischendurch stoppt und die Prozessorauslastung immens hoch geht

Code: Alles auswählen

  document.write('<img id="Blase'+i+'" style="position:absolute;top:'+PosY[i]+'px;left:'+PosX[i]+'px" src="'+ImageURL+'">');

kann es sein, dass ich nur hier was im Script ändern muss? Der blaue Bereich auf meiner Seite ist eine Datenzelle einer Tabelle mit einem Gif als Hintergrund.
(oh, ich könnte würgen....ich kann JavaScript nicht ausstehen....zum Glück gibts Pure Basic....)

Verfasst: **15.06.2008 22:34**

habe dir ja extra n "Config" gebastelt

Code: Alles auswählen

   var Height=200; 
   var Width=200; 
   var Top=0; 
   var Left=0;

steht an anfang, da kannst du dann bestimmen wo (Top, Left) und die groß die ausdehung des Aufsteigens sein soll.

Das die Auslastung sehr doch ist liegt daran:
setTimeout('Animation()',10);
Er führt also eine Schleife aus, welche ein "Delay" von 10ms hat, für n Browser sehr kurz. Wenn du es größer machst stocken aber die blasen, musst du selber einstellen ....

Verfasst: **16.06.2008 12:44**

Hab das Script eingefügt und hochgeladen und ich finde das sieht schon sehr cool aus... genau, wie ich es haben wollte. Kannst dir das Ergebnis ja mal anschauen. Vielen Dank dafür, hätte es selber nicht hinbekommen, so viel ist sicher

Wäre schön, wenn man das Stocken noch rausbekommt, hab gemerkt, dass dann auch andere Fenster kurz blockiert werden. Woran liegt das ??? Kann es sein, dass das Script resettet und neustartet, nachdem die Anzahl der Blasen erreicht wurde????

PureBoard

Wer kennt sich mit JavaScript aus ???

Wer kennt sich mit JavaScript aus ???