請使用支援HTML5的瀏覽器查看本特效
HTML5有特色的細節條 title><br><base target="_blank">
<br><style><br />body {<br />background: #111;<br />color:White; <br />}<br />a{顏色：白色;}<br />畫布{<br />背景：#111；<br />邊框：1px實心#171717；<br />顯示：塊；<br />左：50 %;<br />邊距: -51px 0 0 -201px;<br />位置: 絕對;<br />頂部: 50%;<br />}<br /></style>
<br><br><br><br>/*======================================== ==========*/<br>/* 輕型裝載機<br>/*============== ============= ===========================*/<br>var lightLoader = function (c, cw, ch) {<br>var _this = this;<br>this.c = c;<br>this.ctx = c.getContext('2d');<br>this.cw = cw;<br>this. ch = ch;<br>this. loaded = 0;<br>this.loaderSpeed = .6;<br>this.loaderHeight = 10;<br>this.loaderWidth = 310;<br>this.loader = {<br>x: (this.cw / 2) - (this.loaderWidth / 2),<br>y: (this.ch / 2) - (this.loaderHeight / 2)<br>};<br>這個。粒子= [];<br>this.articleLift = 180;<br>this.hueStart = 0<br>this.hueEnd = 120;<br>this.hue = 0;<br>this.gravity = .🎜>this.hue = 0;<br>this.gravity = .115; <br>this.articleRate = 4;<br>/*==================================== ==== ===================*/<br>/* 初始化<br>/*================ === =========================================*/<br>this .init = function ( ) {<br>this.loop();<br>};<br>/*======================== ======= ===========================*/<br>/* 實用函式<br>/*== ======= ============================================= ======*/<br>this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi 1)) rMi); };<br>this. hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 w1 /*============================================= = ============*/<br>/* 更新載入器<br>/*======================== === =================================*/<br>this.updateLoader = function () {<br>if (this.loaded this.loaded = this.loaderSpeed;<br>} else {<br>this.loaded = 0;<br>}<br>}<br>/; *= ================================================== === ====*/<br>/* 渲染載入器<br>/*============================== ====== =========================*/<br>this.renderLoader = function () {<br>this.ctx .fillStyle = '#000 ';<br>this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);<br>this.hue = this.hueStart (this.loaderHeight);<br>this.hue = this.hueStart (this .loaded / 100) * (this.hueEnd - this.hueStart);<br>var newWidth = (this.loaded / 100) * this.loaderWidth;<br>this.ctx.fillStyle = 'hsla(' this.hue ', 100%, 40 %, 1)';<br>this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);<br>this.ctx.fillStyle = ' #222';<br>this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);<br>};<br>/*======== ====== ============================================== ==*/<br>/ * 粒子<br>/*===================================== =========== =============*/<br>this.Particle = function () {<br>this.x = _this.loader.x ( (_this.loaded / 100) * _this.loaderWidth ) - _this.rand(0, 1);<br>this.y = _this.ch / 2 _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2 ;<br>this.vx = (_this. rand(0, 4) - 2) / 100;<br>this.vy = (_this.rand(0, _this.articleLift) - _this.articleLift * 2) / 100 ;<br>this.width = _this.rand (1, 4) / 2;<br>this.height = _this.rand(1, 4) / 2;<br>this.hue = _this.hue;<br>};<br>this.Particle.prototype .update = function (i) {<br>this.vx = (_this.rand(0, 6) - 3) / 100;<br>this.vy = _this. gravity;<br>this.x = this. vx;<br>this.y = this.vy;<br>if (this.y >; _this.ch) {<br>_this.articles.splice(i, 1);<br>}<br>};<br>this.Particle.prototype.render = function () {<br>_this.ctx. fillStyle = 'hsla(' this.hue ', 100%, ' _this .rand(50, 70) '%, ' _this.rand(20, 100) / 100 ')';<br>_this.ctx.fillRect( this.x, this.y, this.width, this.height) ;<br>};<br>this.createParticles = function () {<br>var i = this.articleRate;<br>while (i- -) {<br>this.articles.push(new this.Particle ());<br>};<br>};<br>this.updateParticles = function () {<br>var i = this.articles .length;<br>while (i--) {<br> var p = this.articles[i];<br>p.update(i);<br>};<br>};<br>this .renderParticles = function () {<br>var i = this.articles .length;<br>while (i--) {<br>var p = this.articles[i];<br>p.render() ;<br>};<br>};
<p>/*============================================== = ============*/<br>/* 透明畫布<br>/*======================= === ==================================*/<br>this.clearCanvas = function () { this.clearCanvas ctx.globalCompositeOperation = 'source-over';this.ctx.clearRect(0, 0, this.cw, this.ch);<br>this.ctx.globalCompositeOperation = '更輕';<br>};<br>/*========= ================================================== = */ <br>/* 動畫循環<br>/*=================================== ===== ==== ==================*/<br>this.loop = function () {<br>var LoopIt = function () { <br>requestAnimationFrame( LoopIt, _this.c);<br>_this.clearCanvas();<br>_this.createParticles();<br>_this.updateLoader();<br>_this.updateParticles(); >_this.renderLoader( );<br>_this.renderParticles();<br>};<br>loopIt();<br>};<br>};<br>/*======= ===== =============================================== =====*/<br>/* 問卷支持<br>/*================================ ============ ========= ===========*/<br>var isCanvasSupported = function () {<br>var elem = document.createElement('canvas');<br> return !!(elem.getContext && elem .getContext('2d'));<br>};<br>/*============ ============== =========== =========================== ==*/<br>/* requestAnimationFrame<br>/* =================================== ================ =========*/<br> var setupRAF = function () {<br>var lastTime = 0;<br>varvendors = ['ms', 'moz', 'webkit', 'o' ];<br>for (var x = 0; x window.requestAnimationFrame = window[vendors[x] 'RequestAnimationFrame'];<br>window.cancelAnimationFrame = window[vendors[x] 'CancelAnimationFrame'] || window[vendors[x] 'CancelRequestAnimationFrame'];<br>};<br>if (!window.requestAnimationFrame) {<br>window.requestAnimationFrame = function (callback, element) {<br>var. ).getTime();<br>var timeToCall = Math.max(0, 16 - (currTime - lastTime));<br>var id = window.setTimeout(function () { callback(currTime timeToCall); }, timeToCall );<br>lastTime = currTime timeToCall;<br>返回id;<br>};<br>};<br>if (!window.cancelAnimationFrame) {<br>window.cancelAnimationFrame = function (id) {<br>clearTimeout(id);<br>};<br>};<br>};<br>/*========================= =================================*/<br>/* 規定重啟並初始化<br>/*= ==================================================== = = =====*/<br>if (isCanvasSupported) {<br>var c = document.createElement('canvas');<br>c.width = 400;<br>c.height = 100; <br>var cw = c.width;<br>var ch = c.height;<br>document.body.appendChild(c);<br>var cl = new lightLoader(c, cw, ch);<br> setupRAF ();<br>cl.init();<br>}<br><br></p>
<div style="position:absolute; top: 0;width:100%">
<br> <br>HTML5詳細條<br>請使用支援HTML5的瀏覽器檢視本頁</div>
<br>
