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

1

2

3

4

HTML5烟花燃放特效代码

5

6

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

47

48

49

50

51

52

53

O(∩_∩)O~~

54

同

55

学

56

们

57

节

58

日

59

快

60

乐

61

~~

62

63

64

鼠标点击释放烟花效果

65

66

67

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 functiona() {78 aLi[0].style.display = "block"

79 }80 functionb() {81 aLi[1].style.display = "block"

82 }83 functionc() {84 aLi[2].style.display = "block"

85 }86 functiond() {87 aLi[3].style.display = "block"

88 }89 functione() {90 aLi[4].style.display = "block"

91 }92 functionf() {93 aLi[5].style.display = "block"

94 }95 functiong() {96 aLi[6].style.display = "block"

97 }98 functionh() {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

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 = newFireworks();409

410 });411

412

413

414

415