1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <!-- 引用本地jquery文件 -->
7 <script src="../script/jquery-1.9.1.min.js"></script>
8 <!-- 引用百度jquery文件 -->
9 <!-- <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> -->
10 <style type="text/css">
11 .divBody {
12 position: absolute;
13 top: 0;
14 left: 0;
15 width: 100%;
16 height: 100%;
17 background-color: #000000;
18 font-family: "黑体";
19 color: #292929;
20 }
21
22 canvas {
23 cursor: crosshair;
24 display: block;
25 left: 0;
26 position: absolute;
27 top: 0;
28 z-index: 20;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="divBody">123456789</div>
34 <canvas width="100%" height="100%">1111111</canvas>
35 </body>
36 </html>
37 <script>
38 var Fireworks;
39 $(function() {
40 Fireworks = function() {
41 var self = this;
42 var rand = function(rMi, rMa) {
43 return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
44 }
45 var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2) {
46 return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
47 };
48 window.requestAnimFrame = function() {
49 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
50 window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(a) {
51 window.setTimeout(a, 1E3 / 60)
52 }
53 }();
54
55 self.init = function() {
56 self.canvas = document.createElement('canvas');
57 self.canvas.width = self.cw = $(window).innerWidth();
58 self.canvas.height = self.ch = $(window).innerHeight();
59 self.particles = [];
60 self.partCount = 150;
61 self.fireworks = [];
62 self.mx = self.cw / 2;
63 self.my = self.ch / 2;
64 self.currentHue = 30;
65 self.partSpeed = 5;
66 self.partSpeedVariance = 10;
67 self.partWind = 50;
68 self.partFriction = 5;
69 self.partGravity = 1;
70 self.hueMin = 0;
71 self.hueMax = 10; //单次最多释放个数
72 self.fworkSpeed = 4;
73 self.fworkAccel = 10;
74 self.hueVariance = 30;
75 self.flickerDensity = 25;
76 self.showShockwave = true;
77 self.showTarget = false;
78 self.clearAlpha = 25;
79
80 $(document.body).append(self.canvas);
81 self.ctx = self.canvas.getContext('2d');
82 self.ctx.lineCap = 'round';
83 self.ctx.lineJoin = 'round';
84 self.lineWidth = 1;
85 self.bindEvents();
86 self.canvasLoop();
87
88 self.canvas.onselectstart = function() {
89 return false;
90 };
91 };
92
93 self.createParticles = function(x, y, hue) {
94 var countdown = self.partCount;
95 while (countdown--) {
96 var newParticle = {
97 x: x,
98 y: y,
99 coordLast: [{
100 x: x,
101 y: y
102 },
103 {
104 x: x,
105 y: y
106 },
107 {
108 x: x,
109 y: y
110 }
111 ],
112 angle: rand(0, 360),
113 speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance,
114 (self.partSpeed + self.partSpeedVariance)),
115 friction: 1 - self.partFriction / 100,
116 gravity: self.partGravity / 2,
117 hue: rand(hue - self.hueVariance, hue + self.hueVariance),
118 brightness: rand(50, 80),
119 alpha: rand(40, 100) / 100,
120 decay: rand(10, 50) / 1000,
121 wind: (rand(0, self.partWind) - (self.partWind / 2)) / 25,
122 lineWidth: self.lineWidth
123 };
124 self.particles.push(newParticle);
125 }
126 };
127
128
129 self.updateParticles = function() {
130 var i = self.particles.length;
131 while (i--) {
132 var p = self.particles[i];
133 var radians = p.angle * Math.PI / 180;
134 var vx = Math.cos(radians) * p.speed;
135 var vy = Math.sin(radians) * p.speed;
136 p.speed *= p.friction;
137
138 p.coordLast[2].x = p.coordLast[1].x;
139 p.coordLast[2].y = p.coordLast[1].y;
140 p.coordLast[1].x = p.coordLast[0].x;
141 p.coordLast[1].y = p.coordLast[0].y;
142 p.coordLast[0].x = p.x;
143 p.coordLast[0].y = p.y;
144
145 p.x += vx;
146 p.y += vy;
147 p.y += p.gravity;
148
149 p.angle += p.wind;
150 p.alpha -= p.decay;
151
152 if (!hitTest(0, 0, self.cw, self.ch, p.x - p.radius, p.y - p.radius, p.radius * 2, p.radius * 2) || p.alpha <
153 .05) {
154 self.particles.splice(i, 1);
155 }
156 };
157 };
158
159 self.drawParticles = function() {
160 var i = self.particles.length;
161 while (i--) {
162 var p = self.particles[i];
163
164 var coordRand = (rand(1, 3) - 1);
165 self.ctx.beginPath();
166 self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
167 self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
168 self.ctx.closePath();
169 self.ctx.strokeStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + p.alpha + ')';
170 self.ctx.stroke();
171
172 if (self.flickerDensity > 0) {
173 var inverseDensity = 50 - self.flickerDensity;
174 if (rand(0, inverseDensity) === inverseDensity) {
175 self.ctx.beginPath();
176 self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth, p.lineWidth + 3) / 2, 0, Math.PI * 2, false)
177 self.ctx.closePath();
178 var randAlpha = rand(50, 100) / 100;
179 self.ctx.fillStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + randAlpha + ')';
180 self.ctx.fill();
181 }
182 }
183 };
184 };
185
186
187 self.createFireworks = function(startX, startY, targetX, targetY) {
188 var newFirework = {
189 x: startX,
190 y: startY,
191 startX: startX,
192 startY: startY,
193 hitX: false,
194 hitY: false,
195 coordLast: [{
196 x: startX,
197 y: startY
198 },
199 {
200 x: startX,
201 y: startY
202 },
203 {
204 x: startX,
205 y: startY
206 }
207 ],
208 targetX: targetX,
209 targetY: targetY,
210 speed: self.fworkSpeed,
211 angle: Math.atan2(targetY - startY, targetX - startX),
212 shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) + (90 * (Math.PI / 180)),
213 acceleration: self.fworkAccel / 100,
214 hue: self.currentHue,
215 brightness: rand(50, 80),
216 alpha: rand(50, 100) / 100,
217 lineWidth: self.lineWidth
218 };
219 if (self.fireworks.length < self.hueMax) {
220 self.fireworks.push(newFirework);
221 }
222
223
224 };
225
226
227 self.updateFireworks = function() {
228 var i = self.fireworks.length;
229
230 while (i--) {
231 var f = self.fireworks[i];
232 self.ctx.lineWidth = f.lineWidth;
233
234 vx = Math.cos(f.angle) * f.speed,
235 vy = Math.sin(f.angle) * f.speed;
236 f.speed *= 1 + f.acceleration;
237 f.coordLast[2].x = f.coordLast[1].x;
238 f.coordLast[2].y = f.coordLast[1].y;
239 f.coordLast[1].x = f.coordLast[0].x;
240 f.coordLast[1].y = f.coordLast[0].y;
241 f.coordLast[0].x = f.x;
242 f.coordLast[0].y = f.y;
243
244 if (f.startX >= f.targetX) {
245 if (f.x + vx <= f.targetX) {
246 f.x = f.targetX;
247 f.hitX = true;
248 } else {
249 f.x += vx;
250 }
251 } else {
252 if (f.x + vx >= f.targetX) {
253 f.x = f.targetX;
254 f.hitX = true;
255 } else {
256 f.x += vx;
257 }
258 }
259
260 if (f.startY >= f.targetY) {
261 if (f.y + vy <= f.targetY) {
262 f.y = f.targetY;
263 f.hitY = true;
264 } else {
265 f.y += vy;
266 }
267 } else {
268 if (f.y + vy >= f.targetY) {
269 f.y = f.targetY;
270 f.hitY = true;
271 } else {
272 f.y += vy;
273 }
274 }
275
276 if (f.hitX && f.hitY) {
277 self.createParticles(f.targetX, f.targetY, f.hue);
278 self.fireworks.splice(i, 1);
279
280 }
281 };
282 };
283
284 self.drawFireworks = function() {
285 var i = self.fireworks.length;
286 self.ctx.globalCompositeOperation = 'lighter';
287 while (i--) {
288 var f = self.fireworks[i];
289 self.ctx.lineWidth = f.lineWidth;
290
291 var coordRand = (rand(1, 3) - 1);
292 self.ctx.beginPath();
293 self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
294 self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
295 self.ctx.closePath();
296 self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + f.alpha + ')';
297 self.ctx.stroke();
298
299 if (self.showTarget) {
300 self.ctx.save();
301 self.ctx.beginPath();
302 self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1, 8), 0, Math.PI * 2, false)
303 self.ctx.closePath();
304 self.ctx.lineWidth = 1;
305 self.ctx.stroke();
306 self.ctx.restore();
307 }
308
309 if (self.showShockwave) {
310 self.ctx.save();
311 self.ctx.translate(Math.round(f.x), Math.round(f.y));
312 self.ctx.rotate(f.shockwaveAngle);
313 self.ctx.beginPath();
314 self.ctx.arc(0, 0, 1 * (f.speed / 5), 0, Math.PI, true);
315 self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + rand(25, 60) / 100 + ')';
316 self.ctx.lineWidth = f.lineWidth;
317 self.ctx.stroke();
318 self.ctx.restore();
319 }
320 };
321 };
322
323 self.bindEvents = function() {
324 $(window).on('resize', function() {
325 clearTimeout(self.timeout);
326 self.timeout = setTimeout(function() {
327 self.canvas.width = self.cw = $(window).innerWidth();
328 self.canvas.height = self.ch = $(window).innerHeight();
329 self.ctx.lineCap = 'round';
330 self.ctx.lineJoin = 'round';
331 }, 100);
332 });
333 //鼠标点击释放烟花
334 $(self.canvas).on('mousedown', function(e) {
335 self.mx = e.pageX - self.canvas.offsetLeft;
336 self.my = e.pageY - self.canvas.offsetTop;
337 self.currentHue = rand(self.hueMin, self.hueMax);
338 self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);
339
340 $(self.canvas).on('mousemove.fireworks', function(e) {
341 self.mx = e.pageX - self.canvas.offsetLeft;
342 self.my = e.pageY - self.canvas.offsetTop;
343 self.currentHue = rand(self.hueMin, self.hueMax);
344 self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);
345 });
346 });
347
348 $(self.canvas).on('mouseup', function(e) {
349 $(self.canvas).off('mousemove.fireworks');
350 });
351
352 var startX, startY;
353 var isSwiping = false;
354 // 触摸开始事件处理函数
355 $(self.canvas).on("touchstart", function (event) {
356 isSwiping = true;
357 startX = event.touches[0].clientX;
358 startY = event.touches[0].clientY;
359 });
360
361 //滑动事件处理函数
362 $(self.canvas).on("touchmove", function (event) {
363 event.preventDefault(); // 阻止默认的滚动行为
364 });
365 //滑动事件结束处理函数
366 $(self.canvas).on('touchend', function (event) {
367 var endX = event.changedTouches[0].clientX;
368 var endY = event.changedTouches[0].clientY;
369 var deltaX = endX - startX;
370 var deltaY = endY - startY;
371 if (deltaY > 10 || deltaY < -10) {
372 $(self.canvas).remove();
373 setTimeout(function () {
374 if (deltaY > 10) {
375 //上一页
376 //PUC.changePage(0);
377 } else if (deltaY < -10) {
378 //下一页
379 //PUC.changePage(1);
380 }
381 }, 500);
382 }
383
384 });
385
386 }
387
388 self.clear = function() {
389 self.particles = [];
390 self.fireworks = [];
391 self.ctx.clearRect(0, 0, self.cw, self.ch);
392 };
393
394
395 self.canvasLoop = function() {
396 requestAnimFrame(self.canvasLoop, self.canvas);
397 self.ctx.globalCompositeOperation = 'destination-out';
398 self.ctx.fillStyle = 'rgba(0,0,0,' + self.clearAlpha / 100 + ')';
399 self.ctx.fillRect(0, 0, self.cw, self.ch);
400 self.updateFireworks();
401 self.updateParticles();
402 self.drawFireworks();
403 self.drawParticles();
404
405 };
406
407 self.testClick = function() {
408 var eventX = randomNum(0, width);
409 var eventY = randomNum(0, height);
410 self.mx = eventX;
411 self.my = eventY;
412 self.currentHue = rand(self.hueMin, self.hueMax);
413 self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);
414 };
415
416 self.setInterval = function() {
417 setTimeout(function() {
418 self.testClick();
419 clearTimeout(self.timeout);
420 setTimeout(function() {
421 self.setInterval();
422 }, 1000);
423 }, 1000);
424
425
426
427 };
428
429 self.init();
430 self.setInterval(); //PS:页面加载后自动执行
431
432 }
433 var fworks = new Fireworks();
434
435 });
436
437
438 var width = $(window).width();
439 var height = $(window).height();
440 //获取随机数 生成坐标
441 function randomNum(minNum, maxNum) {
442 switch (arguments.length) {
443 case 1:
444 return parseInt(Math.random() * minNum + 1, 10);
445 break;
446 case 2:
447 return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
448 break;
449 default:
450 return 0;
451 break;
452 }
453 }
454 </script>
浙公网安备 33010602011771号