<script type="text/javascript"> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Timothy Groves | http://www.brandspankingnew.net/ */ 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> <style> div.cf_wrapper { position: relative; left: 30%; } 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; } </style> <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="butterfly.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> <script type="text/javascript"> <!-- var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 ); --> </script>

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

	güzel sevdim :) / Javascript Css Crossfader - seigh - 10.09.2007  / Cevapla
	güzel bir olay forumda seçmece konular için kullanacağım ama çok hızlı geçiş yapıyor

1 - 26 arası / 1 toplam yorum