Phiên bản đầy đủ: jsB@nk » Chữ » Mờ và chớp sáng » Chữ mờ dần
URL: https://www.javascriptbank.com/javascript-crossfader.html
Một đoạn mã JavaScript tuyệt vời để tạo nội dung mờ dần trên trang web của bạn. Hiệu ứng được lập trình hoàn toàn theo hướng đối tượng và DOM (Document Object Model) đồng thời tương thích với hầu hết các trình duyệt lớn hiện nay; vì vậy rất sử dụng và chỉnh sửa.
Phiên bản đầy đủ: jsB@nk » Chữ » Mờ và chớp sáng » Chữ mờ dần
URL: https://www.javascriptbank.com/javascript-crossfader.html
<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--><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--><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-->