»
AnglaisFran�aisVietnamien

Imprimer - JavaScript Crossfader - JavaScriptBank.com

Version compl�te: jsB@nk » Texte » Fade-Glow » JavaScript Crossfader
URL: https://www.javascriptbank.com/javascript-crossfader.html

JavaScript Crossfader © JavaScriptBank.comA cool script pour faire de votre contenu fade sur la page Web. Object-encapsulé unobtusive JavaScript crossfader, pas besoin de js bibliothèque. Compatibilité des navigateurs: IE, FF, Opera, Safari. Très facile à utiliser et modifier.

Version compl�te: jsB@nk » Texte » Fade-Glow » JavaScript Crossfader
URL: https://www.javascriptbank.com/javascript-crossfader.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}<!--div.cf_wrapper {  position: relative;}div.cf_element {width: 400px;background-color: #eee;border: 1px solid #ccc;}div.cf_element div.content { padding: 10px;}div.cf_element div.content h3 {padding-top: 0;margin-top: 0;}#wrapper {width: 400px;margin: 10px auto;text-align: left;  clear: both;}--></style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript"><!--/** *  author:Timothy Groves - http://www.brandspankingnew.net *version:1.3 - 2006-11-02 *1.2 - 2006-11-01 *1.1 - 2006-09-29 *1.0 - 2006-09-25 * See http://www.maths.bath.ac.uk/~mapmdd/zgz.html for use with photos. * */var useBSNns;if (useBSNns) { if (typeof(bsn) == "undefined")  bsn = {}   var _bsn = bsn;} else {  var _bsn = this;}_bsn.Crossfader = function (divs, fadetime, delay ) { this.nAct = -1; this.aDivs = divs; for (var i=0;i<divs.length;i++) {   document.getElementById(divs[i]).style.opacity = 0;   document.getElementById(divs[i]).style.position = "absolute";   document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";   document.getElementById(divs[i]).style.visibility = "hidden"; } this.nDur = fadetime;  this.nDelay = delay;  this._newfade();}_bsn.Crossfader.prototype._newfade = function() {  if (this.nID1)    clearInterval(this.nID1);   this.nOldAct = this.nAct;    this.nAct++; if (!this.aDivs[this.nAct])this.nAct = 0; if (this.nAct == this.nOldAct)    return false;  document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";  this.nInt = 50;  this.nTime = 0;  var p=this;  this.nID2 = setInterval(function() { p._fade() }, this.nInt);}_bsn.Crossfader.prototype._fade = function() {  this.nTime += this.nInt; var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 ); var op = ieop / 100; document.getElementById( this.aDivs[this.nAct] ).style.opacity = op; document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";  if (this.nOldAct > -1) {    document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;  document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")"; } if (this.nTime == this.nDur) {  clearInterval( this.nID2 );  if (this.nOldAct > -1)   document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";    var p=this;    this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);  }}_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d) {  return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;}--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div id="wrapper"><div class="cf_wrapper"><div class="cf_element" id="cf1"><div class="content"><h3>Element 1</h3><p>Quod mazim placerat facer possim assum typi non habent claritatem. Demonstraverunt lectores legere me lius, quod ii <a href="#">legunt saepius claritas</a> est etiam processus dynamicus qui.</p></div></div><div class="cf_element" id="cf2"><div class="content"><h3>Element 2</h3><p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua <strong>franca va esser</strong> plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A <em>un Angleso it va semblar un</em> simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p></div></div><div class="cf_element" id="cf3"><div class="content"><h3>Element 3</h3><p style="text-align: center;"><img src="../image/logojs.gif" width="200" height="150"><br>Iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere me. Usus legentis in lius quod ii legunt saepius claritas est etiam processus dynamicus qui. <a href="#">Littera gothica quam!</a></p></div></div></div></div><script type="text/javascript"><!-- var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->