首页 > 代码库 > HTML5有特色的进度条
HTML5有特色的进度条
查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm
完整代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=‘UTF-8‘> 5 <title>HTML5有特色的进度条-柯乐义</title> 6 <base target="_blank" /> 7 <style> 8 body { 9 background: #111; 10 color:White; 11 } 12 a{color:White;} 13 canvas { 14 background: #111; 15 border: 1px solid #171717; 16 display: block; 17 left: 50%; 18 margin: -51px 0 0 -201px; 19 position: absolute; 20 top: 50%; 21 } 22 </style> 23 </head> 24 <body> 25 <script type="text/javascript"> 26 /*==================keleyi.com============================*/ 27 /* Light Loader 28 /*==================柯乐义================================*/ 29 var lightLoader = function (c, cw, ch) { 30 31 var _this = this; 32 this.c = c; 33 this.ctx = c.getContext(‘2d‘); 34 this.cw = cw; 35 this.ch = ch; 36 37 this.loaded = 0; 38 this.loaderSpeed = .6; 39 this.loaderHeight = 10; 40 this.loaderWidth = 310; 41 this.loader = { 42 x: (this.cw / 2) - (this.loaderWidth / 2), 43 y: (this.ch / 2) - (this.loaderHeight / 2) 44 }; 45 this.particles = []; 46 this.particleLift = 180; 47 this.hueStart = 0 48 this.hueEnd = 120; 49 this.hue = 0; 50 this.gravity = .15; 51 this.particleRate = 4; 52 53 /*========================================================*/ 54 /* Initialize 55 /*========================================================*/ 56 this.init = function () { 57 this.loop(); 58 }; 59 60 /*========================================================*/ 61 /* Utility Functions 62 /*========================================================*/ 63 this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi + 1)) + rMi); }; 64 this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); }; 65 66 /*========================================================*/ 67 /* Update Loader 68 /*========================================================*/ 69 this.updateLoader = function () { 70 if (this.loaded < 100) { 71 this.loaded += this.loaderSpeed; 72 } else { 73 this.loaded = 0; 74 } 75 }; 76 77 /*========================================================*/ 78 /* Render Loader 79 /*========================================================*/ 80 this.renderLoader = function () { 81 this.ctx.fillStyle = ‘#000‘; 82 this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); 83 84 this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart); 85 86 var newWidth = (this.loaded / 100) * this.loaderWidth; 87 this.ctx.fillStyle = ‘hsla(‘ + this.hue + ‘, 100%, 40%, 1)‘; 88 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); 89 90 this.ctx.fillStyle = ‘#222‘; 91 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2); 92 }; 93 94 /*========================================================*/ 95 /* Particles 96 /*========================================================*/ 97 this.Particle = function () { 98 this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) - _this.rand(0, 1); 99 this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;100 this.vx = (_this.rand(0, 4) - 2) / 100;101 this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;102 this.width = _this.rand(1, 4) / 2;103 this.height = _this.rand(1, 4) / 2;104 this.hue = _this.hue;105 };106 107 this.Particle.prototype.update = function (i) {108 this.vx += (_this.rand(0, 6) - 3) / 100;109 this.vy += _this.gravity;110 this.x += this.vx;111 this.y += this.vy;112 113 if (this.y > _this.ch) {114 _this.particles.splice(i, 1);115 }116 };117 118 this.Particle.prototype.render = function () {119 _this.ctx.fillStyle = ‘hsla(‘ + this.hue + ‘, 100%, ‘ + _this.rand(50, 70) + ‘%, ‘ + _this.rand(20, 100) / 100 + ‘)‘;120 _this.ctx.fillRect(this.x, this.y, this.width, this.height);121 };122 123 this.createParticles = function () {124 var i = this.particleRate;125 while (i--) {126 this.particles.push(new this.Particle());127 };128 };129 130 this.updateParticles = function () {131 var i = this.particles.length;132 while (i--) {133 var p = this.particles[i];134 p.update(i);135 };136 };137 138 this.renderParticles = function () {139 var i = this.particles.length;140 while (i--) {141 var p = this.particles[i];142 p.render();143 };144 };145 146 147 /*========================================================*/148 /* Clear Canvas149 /*========================================================*/150 this.clearCanvas = function () {151 this.ctx.globalCompositeOperation = ‘source-over‘;152 this.ctx.clearRect(0, 0, this.cw, this.ch);153 this.ctx.globalCompositeOperation = ‘lighter‘;154 };155 156 /*========================================================*/157 /* Animation Loop 柯 乐 义158 /*========================================================*/159 this.loop = function () {160 var loopIt = function () {161 requestAnimationFrame(loopIt, _this.c);162 _this.clearCanvas();163 164 _this.createParticles();165 166 _this.updateLoader();167 _this.updateParticles();168 169 _this.renderLoader();170 _this.renderParticles();171 172 };173 loopIt();174 };175 176 };177 178 /*========================================================*/179 /* Check Canvas Support180 /*========================================================*/181 var isCanvasSupported = function () {182 var elem = document.createElement(‘canvas‘);183 return !!(elem.getContext && elem.getContext(‘2d‘));184 };185 186 /*========================================================*/187 /* Setup requestAnimationFrame188 /*========================================================*/189 var setupRAF = function () {190 var lastTime = 0;191 var vendors = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘];192 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {193 window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘];194 window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || window[vendors[x] + ‘CancelRequestAnimationFrame‘];195 };196 197 if (!window.requestAnimationFrame) {198 window.requestAnimationFrame = function (callback, element) {199 var currTime = new Date().getTime();200 var timeToCall = Math.max(0, 16 - (currTime - lastTime));201 var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);202 lastTime = currTime + timeToCall;203 return id;204 };205 };206 207 if (!window.cancelAnimationFrame) {208 window.cancelAnimationFrame = function (id) {209 clearTimeout(id);210 };211 };212 };213 214 /*========================================================*/215 /* Define Canvas and Initialize216 /*========================================================*/217 if (isCanvasSupported) {218 var c = document.createElement(‘canvas‘);219 c.width = 400;220 c.height = 100;221 var cw = c.width;222 var ch = c.height;223 document.body.appendChild(c);224 var cl = new lightLoader(c, cw, ch);225 226 setupRAF();227 cl.init();228 }229 </script>230 <div style="position:absolute; top: 0;width:100%">231 <div class="footer-banner" style="width:728px;margin:10px auto;color:White">232 HTML5进度条<br />233 请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com/a/bjad/8lva67xl.htm">原文</a></div>234 </div>235 236 </body>237 </html>
转载自：http://keleyi.com/a/bjad/8lva67xl.htm
web前端资源：http://www.cnblogs.com/jihua/p/webfront.html
HTML5有特色的进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。