查看效果: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 Canvas
149 /*========================================================*/
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 Support
180 /*========================================================*/
181 var isCanvasSupported = function () {
182 var elem = document.createElement(‘canvas‘);
183 return !!(elem.getContext && elem.getContext(‘2d‘));
184 };
185
186 /*========================================================*/
187 /* Setup requestAnimationFrame
188 /*========================================================*/
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 Initialize
216 /*========================================================*/
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
时间： 2024-10-12 07:45:45