Diashow JavaScript
Wenn Sie einen begrenzten Raum Webseite wollen viele Bilder zu platzieren, können Sie ziemlich einfache Java-Script-Diashow verwenden:
<![CDATA[<code>&lt;SCRIPT&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 &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 &gt; (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } &lt;/SCRIPT&gt;</code> ]]>
es ist
1.jpg, 2.jpg, 3.jpg - Serie Bilder können Ausgang aus dem Ordner / img / site / java_slideshow sein /
var slideShowSpeed = 3000 Zeitverzögerung Bilder.
blendTrans (Dauer = .. crossFadeDuration = Änderung der Helligkeit bei Ausgabe von Bildern, die die Verzögerungsparameter und Helligkeit einstellt.
Um Ihre Diashow im Tag <body> aktivieren, legen Sie die folgenden Parameter <BODY .. onload = runSlideShow () und an dem Ort , wo sie direkt auf die Bilder angezeigt werden möchten Sie einfügen: <IMG class = img name = DiaShow src = "/ img / site / java_slideshow /1.jpg ">
Als nächstes werde ich ein Beispiel Java Skript geben, die die Helligkeit des Bildes ändert sich, wenn Sie mit dem Mauszeiger auf sie schweben:
<![CDATA[<code>&lt;SCRIPT&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 &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); } } &lt;/SCRIPT&gt;</code> ]]>
Um ein Skript zu einem bestimmten Bild verwenden Sie den folgenden Code eingefügt werden soll:
<A Href=" ..big.jpg"> <IMG Onmouseover = nereidFade (this, 100,30,10) style = "FILTER: alpha (Opazität = 60)" onmouseout = nereidFade (this, 25,50,10) src = ".. small.jpg" border = 0 width = ".." height = " .."> </A>
Zahlen viel, aber es ist einfach - die ursprüngliche Transparenz des Bildes hier - alpha (Opazität = 60), die Helligkeitsänderung Parameter sind die letzte und erste Transparenz Alpha - Filter in%: nereidFade (this, 100,30,10) , und die dritte Zahl ist ein Schritt Änderung seiner (je höher die Tonhöhe - je schneller die Änderung hier schweben Transparenz von 30 bis 100% in Schritten von 10 wachsen wird , wenn Sie schweben: onmouseover und dann schweben: onMouseOut von 50 auf 25% fallen)
Nun ist es nur die Auswahl der Bilder, und Ihre Besucher werden angenehm überrascht sein, wie Sie so Original-Webseite zu arrangieren verwaltet ..
Das folgende Skript ändert sich allmählich Farbreferenz, wenn Sie den Cursor darauf schweben:
<![CDATA[<code><script>document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i < 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 < 0) return "00"; else if (i > 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 <= 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); } </script></code> ]]>
Farbe wird am Ende des Skripts in RGB-Format angegeben:
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);
}
Nach dem Aufruf eines Scripts die Farbe von Links in seinem Tag zu ändern, legen Sie die Parameter:
<B> <a href="http:" name="fading_link1" class="fade"> Verbindung 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Link 2 </a> </ b>
Kommentare
im Auge kommentierte halten , dass der Inhalt und der Ton Ihrer Nachrichten , die Gefühle von echten Menschen verletzen können, Respekt und Toleranz gegenüber seinen Gesprächspartnern, auch wenn Sie Ihr Verhalten in Bezug auf die Meinungsfreiheit und die Anonymität des Internets, ändert ihre Meinung nicht teilen, nicht nur virtuell, sondern realen Welt. Alle Kommentare werden aus dem Index, Spam - Kontrolle versteckt.