JQuery和html+css实现鼠标点击放烟花
程序员文章站
2022-03-17 08:09:38
...
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 = "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>
广大网友们!因为这是放假的时候老师给发的!所以我也看不太懂有些东西!实在是抱歉 有什么不明白的,就留言告诉我!我去找我曾经的老师问问,虽然他已经退休好久了!!
以上就是JQuery和html+css实现鼠标点击放烟花的详细内容，更多请关注其它相关文章！