JQuery和html+css实现鼠标点击放烟花

  1 <!DOCTYPE html>
  2 <html>
  3 <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4     <title>HTML5烟花燃放特效代码</title>
  5 
  6     <style>
  7         html,body{height:100%;margin:0;padding:0}
  8         ul,li{text-indent:0;text-decoration:none;margin:0;padding:0}
  9         img{border:0}
 10         body{background-color:#000;color:#999;font:100%/18px helvetica, arial, sans-serif}
 11         canvas{cursor:crosshair;display:block;left:0;position:absolute;top:0;z-index:20}
 12         *{
 13             margin: 0px;
 14             padding: 0px;
 15         }
 16         #bg_Img{
 17              1920px;
 18             height: 1500px;
 19             border: 1px solid transparent;
 20             background: url("start.gif") repeat;
 21             text-align: center;
 22         }
 23         ul{
 24              5555px;
 25             height: 200px;
 26         }
 27         li{
 28             font: 120px/190px "楷体";
 29             color: white;
 30             text-shadow: 5px 10px 10px 10px;
 31             list-style: none;
 32             float: left;
 33             display: none;
 34         }
 35         #text_bd{
 36              600px;
 37             height: 200px;
 38             border: 5px solid transparent;
 39             margin-left: 200px;
 40         }
 41         #mouse_click{
 42             margin: 0px auto;
 43             text-align: center;
 44             color: white;
 45         }
 46     </style>
 47 
 48 </head>
 49 <body>
 50 <div id="bg_Img">
 51     <div id="text_bd">
 52         <ul>
 53             <li>O(∩_∩)O~~</li>
 54             <li>同</li>
 55              <li>学</li>
 56             <li>们</li>
 57             <li>节</li>
 58             <li>日</li>
 59             <li>快</li>
 60             <li>乐</li>
 61             <li>~~</li>
 62         </ul>
 63     </div>
 64     <div id="mouse_click">鼠标点击释放烟花效果</div>
 65 </div>
 66 <script type="text/javascript" src="jquery-3.1.1.js"></script>
 67 <script type="text/javascript">
 68     var aLi=document.querySelectorAll("li");
 69     setInterval(a,1000);
 70     setInterval(b,2000);
 71     setInterval(c,3000);
 72     setInterval(d,4000);
 73     setInterval(e,5000);
 74     setInterval(f,6000);
 75     setInterval(g,7000);
 76     setInterval(h,8000);
 77     function a() {
 78         aLi[0].style.display = "block"
 79     }
 80     function b() {
 81         aLi[1].style.display = "block"
 82     }
 83     function c() {
 84         aLi[2].style.display = "block"
 85     }
 86     function d() {
 87         aLi[3].style.display = "block"
 88     }
 89     function e() {
 90         aLi[4].style.display = "block"
 91     }
 92     function f() {
 93         aLi[5].style.display = "block"
 94     }
 95     function g() {
 96         aLi[6].style.display = "block"
 97     }
 98     function h() {
 99         aLi[7].style.display = "block"
100     }
101     $(function(){
102         var Fireworks = function(){
103             var self = this;
104             var rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}
105             var hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
106             window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1E3/60)}}();
107 
108             self.init = function(){
109                 self.canvas = document.createElement('canvas');
110                 self.canvas.width = self.cw = $(window).innerWidth();
111                 self.canvas.height = self.ch = $(window).innerHeight();
112                 self.particles = [];
113                 self.partCount = 150;
114                 self.fireworks = [];
115                 self.mx = self.cw/2;
116                 self.my = self.ch/2;
117                 self.currentHue = 30;
118                 self.partSpeed = 5;
119                 self.partSpeedVariance = 10;
120                 self.partWind = 50;
121                 self.partFriction = 5;
122                 self.partGravity = 1;
123                 self.hueMin = 0;
124                 self.hueMax = 360;
125                 self.fworkSpeed = 4;
126                 self.fworkAccel = 10;
127                 self.hueVariance = 30;
128                 self.flickerDensity = 25;
129                 self.showShockwave = true;
130                 self.showTarget = false;
131                 self.clearAlpha = 25;
132 
133                 $(document.body).append(self.canvas);
134                 self.ctx = self.canvas.getContext('2d');
135                 self.ctx.lineCap = 'round';
136                 self.ctx.lineJoin = 'round';
137                 self.lineWidth = 1;
138                 self.bindEvents();
139                 self.canvasLoop();
140 
141                 self.canvas.onselectstart = function() {
142                     return false;
143                 };
144             };
145 
146             self.createParticles = function(x,y, hue){
147                 var countdown = self.partCount;
148                 while(countdown--){
149                     var newParticle = {
150                         x: x,
151                         y: y,
152                         coordLast: [
153                             {x: x, y: y},
154                             {x: x, y: y},
155                             {x: x, y: y}
156                         ],
157                         angle: rand(0, 360),
158                         speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),
159                         friction: 1 - self.partFriction/100,
160                         gravity: self.partGravity/2,
161                         hue: rand(hue-self.hueVariance, hue+self.hueVariance),
162                         brightness: rand(50, 80),
163                         alpha: rand(40,100)/100,
164                         decay: rand(10, 50)/1000,
165                         wind: (rand(0, self.partWind) - (self.partWind/2))/25,
166                         lineWidth: self.lineWidth
167                     };
168                     self.particles.push(newParticle);
169                 }
170             };
171 
172 
173             self.updateParticles = function(){
174                 var i = self.particles.length;
175                 while(i--){
176                     var p = self.particles[i];
177                     var radians = p.angle * Math.PI / 180;
178                     var vx = Math.cos(radians) * p.speed;
179                     var vy = Math.sin(radians) * p.speed;
180                     p.speed *= p.friction;
181 
182                     p.coordLast[2].x = p.coordLast[1].x;
183                     p.coordLast[2].y = p.coordLast[1].y;
184                     p.coordLast[1].x = p.coordLast[0].x;
185                     p.coordLast[1].y = p.coordLast[0].y;
186                     p.coordLast[0].x = p.x;
187                     p.coordLast[0].y = p.y;
188 
189                     p.x += vx;
190                     p.y += vy;
191                     p.y += p.gravity;
192 
193                     p.angle += p.wind;
194                     p.alpha -= p.decay;
195 
196                     if(!hitTest(0,0,self.cw,self.ch,p.x-p.radius, p.y-p.radius, p.radius*2, p.radius*2) || p.alpha < .05){
197                         self.particles.splice(i, 1);
198                     }
199                 };
200             };
201 
202             self.drawParticles = function(){
203                 var i = self.particles.length;
204                 while(i--){
205                     var p = self.particles[i];
206 
207                     var coordRand = (rand(1,3)-1);
208                     self.ctx.beginPath();
209                     self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));
210                     self.ctx.lineTo(Math.round(p.x), Math.round(p.y));
211                     self.ctx.closePath();
212                     self.ctx.strokeStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';
213                     self.ctx.stroke();
214 
215                     if(self.flickerDensity > 0){
216                         var inverseDensity = 50 - self.flickerDensity;
217                         if(rand(0, inverseDensity) === inverseDensity){
218                             self.ctx.beginPath();
219                             self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth,p.lineWidth+3)/2, 0, Math.PI*2, false)
220                             self.ctx.closePath();
221                             var randAlpha = rand(50,100)/100;
222                             self.ctx.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+randAlpha+')';
223                             self.ctx.fill();
224                         }
225                     }
226                 };
227             };
228 
229 
230             self.createFireworks = function(startX, startY, targetX, targetY){
231                 var newFirework = {
232                     x: startX,
233                     y: startY,
234                     startX: startX,
235                     startY: startY,
236                     hitX: false,
237                     hitY: false,
238                     coordLast: [
239                         {x: startX, y: startY},
240                         {x: startX, y: startY},
241                         {x: startX, y: startY}
242                     ],
243                     targetX: targetX,
244                     targetY: targetY,
245                     speed: self.fworkSpeed,
246                     angle: Math.atan2(targetY - startY, targetX - startX),
247                     shockwaveAngle: Math.atan2(targetY - startY, targetX - startX)+(90*(Math.PI/180)),
248                     acceleration: self.fworkAccel/100,
249                     hue: self.currentHue,
250                     brightness: rand(50, 80),
251                     alpha: rand(50,100)/100,
252                     lineWidth: self.lineWidth
253                 };
254                 self.fireworks.push(newFirework);
255 
256             };
257 
258 
259             self.updateFireworks = function(){
260                 var i = self.fireworks.length;
261 
262                 while(i--){
263                     var f = self.fireworks[i];
264                     self.ctx.lineWidth = f.lineWidth;
265 
266                     vx = Math.cos(f.angle) * f.speed,
267                             vy = Math.sin(f.angle) * f.speed;
268                     f.speed *= 1 + f.acceleration;
269                     f.coordLast[2].x = f.coordLast[1].x;
270                     f.coordLast[2].y = f.coordLast[1].y;
271                     f.coordLast[1].x = f.coordLast[0].x;
272                     f.coordLast[1].y = f.coordLast[0].y;
273                     f.coordLast[0].x = f.x;
274                     f.coordLast[0].y = f.y;
275 
276                     if(f.startX >= f.targetX){
277                         if(f.x + vx <= f.targetX){
278                             f.x = f.targetX;
279                             f.hitX = true;
280                         } else {
281                             f.x += vx;
282                         }
283                     } else {
284                         if(f.x + vx >= f.targetX){
285                             f.x = f.targetX;
286                             f.hitX = true;
287                         } else {
288                             f.x += vx;
289                         }
290                     }
291 
292                     if(f.startY >= f.targetY){
293                         if(f.y + vy <= f.targetY){
294                             f.y = f.targetY;
295                             f.hitY = true;
296                         } else {
297                             f.y += vy;
298                         }
299                     } else {
300                         if(f.y + vy >= f.targetY){
301                             f.y = f.targetY;
302                             f.hitY = true;
303                         } else {
304                             f.y += vy;
305                         }
306                     }
307 
308                     if(f.hitX && f.hitY){
309                         self.createParticles(f.targetX, f.targetY, f.hue);
310                         self.fireworks.splice(i, 1);
311 
312                     }
313                 };
314             };
315 
316             self.drawFireworks = function(){
317                 var i = self.fireworks.length;
318                 self.ctx.globalCompositeOperation = 'lighter';
319                 while(i--){
320                     var f = self.fireworks[i];
321                     self.ctx.lineWidth = f.lineWidth;
322 
323                     var coordRand = (rand(1,3)-1);
324                     self.ctx.beginPath();
325                     self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));
326                     self.ctx.lineTo(Math.round(f.x), Math.round(f.y));
327                     self.ctx.closePath();
328                     self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+f.alpha+')';
329                     self.ctx.stroke();
330 
331                     if(self.showTarget){
332                         self.ctx.save();
333                         self.ctx.beginPath();
334                         self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1,8), 0, Math.PI*2, false)
335                         self.ctx.closePath();
336                         self.ctx.lineWidth = 1;
337                         self.ctx.stroke();
338                         self.ctx.restore();
339                     }
340 
341                     if(self.showShockwave){
342                         self.ctx.save();
343                         self.ctx.translate(Math.round(f.x), Math.round(f.y));
344                         self.ctx.rotate(f.shockwaveAngle);
345                         self.ctx.beginPath();
346                         self.ctx.arc(0, 0, 1*(f.speed/5), 0, Math.PI, true);
347                         self.ctx.strokeStyle = 'hsla('+f.hue+', 100%, '+f.brightness+'%, '+rand(25, 60)/100+')';
348                         self.ctx.lineWidth = f.lineWidth;
349                         self.ctx.stroke();
350                         self.ctx.restore();
351                     }
352                 };
353             };
354 
355             self.bindEvents = function(){
356                 $(window).on('resize', function(){
357                     clearTimeout(self.timeout);
358                     self.timeout = setTimeout(function() {
359                         self.canvas.width = self.cw = $(window).innerWidth();
360                         self.canvas.height = self.ch = $(window).innerHeight();
361                         self.ctx.lineCap = 'round';
362                         self.ctx.lineJoin = 'round';
363                     }, 100);
364                 });
365 
366                 $(self.canvas).on('mousedown', function(e){
367                     self.mx = e.pageX - self.canvas.offsetLeft;
368                     self.my = e.pageY - self.canvas.offsetTop;
369                     self.currentHue = rand(self.hueMin, self.hueMax);
370                     self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
371 
372                     $(self.canvas).on('mousemove.fireworks', function(e){
373                         self.mx = e.pageX - self.canvas.offsetLeft;
374                         self.my = e.pageY - self.canvas.offsetTop;
375                         self.currentHue = rand(self.hueMin, self.hueMax);
376                         self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
377                     });
378                 });
379 
380                 $(self.canvas).on('mouseup', function(e){
381                     $(self.canvas).off('mousemove.fireworks');
382                 });
383 
384             }
385 
386             self.clear = function(){
387                 self.particles = [];
388                 self.fireworks = [];
389                 self.ctx.clearRect(0, 0, self.cw, self.ch);
390             };
391 
392 
393             self.canvasLoop = function(){
394                 requestAnimFrame(self.canvasLoop, self.canvas);
395                 self.ctx.globalCompositeOperation = 'destination-out';
396                 self.ctx.fillStyle = 'rgba(0,0,0,'+self.clearAlpha/100+')';
397                 self.ctx.fillRect(0,0,self.cw,self.ch);
398                 self.updateFireworks();
399                 self.updateParticles();
400                 self.drawFireworks();
401                 self.drawParticles();
402 
403             };
404 
405             self.init();
406 
407         }
408         var fworks = new Fireworks();
409 
410     });
411 
412 </script>
413 
414 </body>
415 </html>
广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!