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 width: 1920px; 18 height: 1500px; 19 border: 1px solid transparent; 20 background: url(start.gif) repeat; 21 text-align: center; 22 } 23 ul{ 24 width: 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 width: 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 = block100 }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.linewidth167 };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.linewidth253 };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>
广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉 有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!
以上就是jquery和html+css实现鼠标点击放烟花的详细内容。