HTML5進度條特效_html5教學技巧-H5教程-PHP中文網

請使用支援HTML5的瀏覽器查看本特效

複製程式碼

程式碼如下:

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