Diaporama JavaScript
Si vous voulez une page espace web limité à placer un grand nombre de photos, vous pouvez utiliser assez simple diaporama de script Java:
<![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> ]]>
il est
1.jpg, 2.jpg, 3.jpg - images de la série peut être émis à partir du dossier / img / site / java_slideshow /
var slideshowspeed = 3000 images à retardement.
blendTrans (durée = .. crossFadeDuration = changement de luminosité lors de la sortie des images qui définit le paramètre de retard et de la luminosité.
Pour activer votre diaporama dans la balise <body>, insérez le paramètre suivant <BODY .. onload = runSlideShow () et dans le lieu où ils seront affichés directement sur les images que vous souhaitez insérer: <IMG class = nom img = SlideShow src = "/ img / site / java_slideshow /1.jpg ">
Ensuite, je vais vous donner un exemple de script Java qui modifie la luminosité de l'image lorsque vous placez le curseur de la souris sur elle:
<![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> ]]>
Pour utiliser un script pour une image particulière que vous souhaitez insérer le code suivant:
<IMG onmouseover = nereidFade <A href=" (this, 100,30,10) style = "FILTER: alpha (opacity = 60)" onmouseout = nereidFade (this, 25,50,10) src = ".. small.jpg" border = 0 width = ".." height = " .."> </A>
Numbers beaucoup, mais il est simple - la transparence originale de l'image ici - alpha (opacity = 60), les paramètres de changement de luminosité sont le filtre de transparence alpha finale et initiale en%: nereidFade (cela, 100,30,10) , et le troisième numéro est une nouvelle étape dans sa (plus la hauteur - plus le changement ici hover la transparence passera de 30 à 100% par incréments de 10 lorsque vous passez: onmouseover puis hover: onmouseout se passera de 50 à 25%)
Maintenant, il est seulement le choix des images, et vos visiteurs seront agréablement surpris comment vous avez réussi à organiser la page web si original ..
Le script suivant modifie progressivement référence de couleur lorsque vous placez le curseur dessus:
<![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> ]]>
La couleur est donnée à la fin du script au format RGB:
fonction fadeout (élément) {fondu ( 255,0,0, 0,0,255, 20, 1, élément);
}
fonction fadein (élément) {fondu ( 0,0,255, 255,0,0, 20, 1, élément);
}
Après avoir appelé un script pour changer la couleur des liens dans son étiquette, insérez le paramètre:
<B> <a href="http:" name="fading_link1" class="fade"> Link 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Link 2 </a> </ b>
Commentaires
Commentant, gardez à l' esprit que le contenu et le ton de vos messages peuvent blesser les sentiments des gens réels, montrer du respect et de la tolérance à ses interlocuteurs, même si vous ne partagez pas leur avis, votre comportement en termes de liberté d'expression et de l' anonymat offert par Internet, est en train de changer non seulement virtuel, mais dans le monde réel. Tous les commentaires sont cachés à l'index, le contrôle anti - spam.