JavaScript: Lake Beispiel01 |
Geschrieben von: Andreas Berger |
Sonntag, den 07. Dezember 2008 um 10:36 Uhr |
Das erste Beispiel zeigt die "übliche" Verwendung des Scripts. Für einen Bereich eines Bildes wird eine Wellenbewegung simuliert. Die Bezeichnungen "lake.html" und "lake.js" entsprechen den Dateinamen in dem Beispiel, das im Download des Scripts hier Javascript: Lake enthalten ist. Die nachfolgenden Erklärungen beziehen sich auf die Dateien im Beispiel und erläutern nur die Einbindung in eine Webseite und die Konfiguration des heruntergeladenen Scripts lake.js. lake.html - die WebseiteDer erste Schritt zur Verwendung ist jeweils die Einbindung des Scripts in die Webseite. Dazu wird es im HEAD-Bereich der Seite verlinkt: <script language="JavaScript" type="text/javascript" src="lake.js"></script> Das Beispiel geht davon aus, dass das Script im selben Verzeichnis liegt wie die Webseite. <div id="lake" style="margin:25px;"> <img src="image.jpg" style="width:400px;height:267px;" /> </div>
Damit sind in der Seite selbst alle nötigen Vorbereitungen getroffen. lake.js - die ScriptdateiIm heruntergeladenen JavaScript-File "lake.js" werden jetzt die einzelnen Parameter entsprechend der gewünschten Verwendung gesetzt. Das oben angezeigte Beispiel verwendet die folgenden Einstellungen:
//*****parameters to set***** var divid="lake"; //Der Parameter "divid" teilt dem Script mit, in welchem //DIV-Container das Bild dargestellt werden soll. var imagea='image.jpg'; //Hier setzen wir den Pfad zum Bild. var pwidth=400; //"pwidth" Ist die Breite des Bildes in Pixel. var pheight=267; //"pheight" Ist die Höhe des Bildes in Pixel. var wavetop=108; //"wavetop" legt fest, wo die Wellen beginnen sollen, //ausgehend vom oberen Bildrand (in Pixel) var wavebot=pheight; //"wavebot" legt fest, wo die Wellen enden, ausgehend vom oberen Bildrand (in Pixel). //Üblicherweise ist das der untere Bildrand und der Wert "pheight" kann belassen werden. //Sollen die Wellen vor dem unteren Bildrand enden, dann ist hier wie bei "wavetop" der //Abstand vom oberen Bildrand in Pixel anzugeben. z.B.: var wavebot="220"; var reverse=0; //"reverse" legt fest, ob der angegebene Teil des Bildes bewegt wird (0) //oder ob der darüberliegende Teil des Bildes als Reflexion //heruntergespiegelt werden soll (1). //In diesem Beispiel bewegen wir den angegebenen Teil des Bildes, also: reverse=0; var opaz=100; //Wenn ein zweites Bild verwendet wird, das durch die Wellen durchschimmert, //dann kann hier die entsprechende Transparenz festgelegt werden. //Die möglichen Werte reichen von 100 (undurchsichtig) bis 0 (transparent). var underlay=0; //Wird ein zweites Bild verwendet, das durch die Wellen durchschimmert, //dann wird hier der entsprechende Pfad angegeben (z.B.: var underlay="image2.jpg"). //Andernfalls bleibt der Parameter auf 0. var overlay=0; //Wird das erste Bild mit einem teilweise transparenten Bild überblendet, //dann wird hier der entsprechende Pfad angegeben (z.B.: var overlay="image2.png"). //Andernfalls bleibt der Parameter auf 0. var uwidth=pwidth; //Mit "uwidth" kann für das "unterblendete" Bild eine //abweichende Breite (in Pixel) festgelegt werden. //In der Regel kann der default-Wert belassen werden. var uheight=wavebot-wavetop; //Mit "uheight" kann für das "unterblendete" Bild eine //abweichende Höhe (in Pixel) festgelegt werden. //In der Regel kann der default-Wert belassen werden. var steps=30; //Die Variable "steps" legt die Höhe einer "Welle" in Pixel fest. var range=2; //"range" legt fest, um wieviele Pixel eine Welle seitlich ausschwingt. //Ein Wert von 10 bedeutet z.B., dass jede Welle maximal 10 Pixel //nach links und 10 Pixel nach rechts auslenkt. //Stellt man den Parameter "reverse" auf 1 um den oberen Bereich eines Bildes //nach unten zu spiegeln, dann wird das Bild links und rechts automatisch um den //Wert "range" beschnitten, um das Durchscheinen des Hintergrundes zu vermeiden. var tim=90; //"tim" definiert das Timeout zwischen zwei Bewegungen in Tausendstelsekunden. //Setzt man den Wert zu niedrig, dann kann das zu Problemen bei der Verarbeitung //der Befehle führen (stack-overflow). var autostart=1; //Ist "autostart" auf 1, dann startet das Script automatisch mit dem Laden der Seite. //Will man es manuell starten, dann setzt man "autostart" auf 0 und bindet //in der Seite einen entsprechenden Link ein: //z.B.: <a href="javascript:firstmove()">los jetzt!</a> //*****nothing more to do, have fun :) Das wars. Welche Wirkung man mit dem Script erzielt hängt neben der Wahl des Motivs wesentlich von den hier gewählten Werten ab und man sollte sich die Zeit nehmen, verschiedene Konfigurationen auszuprobieren. Oftmals haben dabei kleine Änderungen grosse Wirkung. |
Zuletzt aktualisiert am Donnerstag, den 26. November 2009 um 19:19 Uhr |