This page has been robot translated, sorry for typos if any. Original content here.

Diashow JavaScript



Wenn Sie viele Bilder auf einem begrenzten Platz einer Webseite platzieren möchten, können Sie ein ziemlich einfaches Java-Diashow-Skript verwenden:


<code>&amp;lt;SCRIPT&amp;gt; var slideShowSpeed = 3000 var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '/img/site/java_slideshow/1.jpg' Pic[1] = '/img/site/java_slideshow/2.jpg' Pic[2] = '/img/site/java_slideshow/3.jpg' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i &amp;lt; p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j &amp;gt; (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } &amp;lt;/SCRIPT&amp;gt;</code>

Hier
1.jpg, 2.jpg, 3.jpg - sequentiell Bilder aus dem Ordner ausgeben / img / site / java_slideshow /
var slideShowSpeed ​​= 3000 Zeitverzögerung für die Ausgabe von Bildern.
blendTrans (duration = .. crossFadeDuration = Ändere die Helligkeit beim Anzeigen von Bildern, wodurch der Parameter Verzögerung und Helligkeit eingestellt wird.

Um Ihre Diashow im <Body> -Tag zu aktivieren, fügen Sie den folgenden <BODY .. onload = runSlideShow () - Parameter ein und an die Stelle, an der die Bilder direkt angezeigt werden: <IMG class = img name = SlideShow src = "/ img / site / java_slideshow /1.jpg ">






Als nächstes gebe ich Ihnen ein Beispiel für ein Java-Skript, das die Helligkeit eines Bildes ändert, wenn Sie den Mauszeiger über den Cursor bewegen:

<code>&amp;lt;SCRIPT&amp;gt; nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity &amp;gt; destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } &amp;lt;/SCRIPT&amp;gt;</code>

Um ein Skript auf ein bestimmtes Bild anzuwenden, müssen Sie den folgenden Code einfügen:

<A href="..big.jpg"> <IMG onmouseover = nereidFade (dies, 100,30,10) style = "FILTER: alpha (Deckkraft = 60)" onmouseout = nereidFade (dies, 25,50,10) src = ".. small.jpg" Rahmen = 0 width = ".." height = ".."> </A>

Zahlen sind viele, aber alles ist einfach - die ursprüngliche Transparenz des Bildes ist hier Alpha (Deckkraft = 60), die Parameter für die Änderung der Helligkeit sind gegeben durch die finale und initiale Transparenz des Alpha-Filters in%: nereidFade (this, 100,30,10) , und die dritte Zahl ist der Schritt der Veränderung ( Je größer der Schritt, desto schneller die Änderung, hier beim Schweben der Transparenz wird von 30 auf 100% in Schritten von +10 beim Schweben erhöht : onmouseover und nach dem Schweben der Maus: onmouseout wird von 50 auf 25% fallen)

Jetzt ist es nur die Auswahl der Bilder, und Ihre Besucher werden angenehm überrascht sein, wie Sie es geschafft haben, die Webseite so originell zu gestalten.






Das folgende Skript ändert die Farbe der Verknüpfung, wenn Sie den Cursor darüber bewegen:

<code>&lt;script&gt;document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i &lt;= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i &lt; 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i &lt; 0) return "00"; else if (i &gt; 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setbgColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step, direction, element){ for(var i = 0; i &lt;= step; i++) { setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } } function fadeout(element) { fade(255,0,0, 0,0,255, 20, 1, element); } function fadein(element) { fade(0,0,255, 255,0,0, 20, 1, element); } &lt;/script&gt;</code>

Die Farbe wird am Ende des Skripts im RGB-Format festgelegt:
Funktion Fadeout (Element) {Fade (255,0,0, 0,0,255, 20, 1, Element); }
Funktion Fadein (Element) {Fade (0,0,255, 255,0,0, 20, 1, Element); }

Nachdem Sie das Skript aufgerufen haben, um die Farbe des Links in seinem Tag zu ändern, fügen Sie den Parameter ein:
<b> <a href="http:" name="fading_link1" class="fade"> Link 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Link 2 </a> </a> </ b>