This article illustrates the method of JS to achieve the effect of super-dazzle web-animated fireworks. Share to everyone for your reference. The specific analysis is as follows:
Very cool use of JS to achieve a Web page fireworks display animation effect, can adapt to JS to make such an animation to
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Ultra-Dazzle Web page Fireworks effect </title>
<style type= "Text/css" >
. fire{display:block; overflow:hidden; font-size:12px; Position:absolute};
Body{overflow:hidden background: #000}
Html{overflow:hidden background: #000}
</style>
<body>
</body>
<script type= "Text/javascript" >
var Fire = function (r, color) {
This.radius = R | | 12;
This.color = color;
This.xpos = 0;
This.ypos = 0;
This.zpos = 0;
THIS.VX = 0;
This.vy = 0;
This.vz = 0;
This.mass = 1;
this.x = 0;
this.y=0;
THIS.P = document.createelement ("span");
This.p.classname = "Fire";
this.p.innerhtml = "*";
This.p.style.fontsize = This.radius + "px";
This.p.style.color = "#" + This.color;
}
Fire.prototype = {
Append:function (parent) {
Parent.appendchild (THIS.P);
},
Setsize:function (scale) {
This.p.style.fontsize = This.radius * scale + "px";
},
Setposition:function (x, y) {
This.p.style.left = x + "px";
This.p.style.top = y + "px";
},
Setvisible:function (b) {
This.p.style.display = b? "Block": "None";
}
}
var fireworks = function () {
var fires = new Array ();
var count = 150;
var fl = 250;
var vpx = 500;
var vpy = 300;
var gravity =. 5;
var floor = 200;
var bounce =-.8;
var timer;
var wind = ((Math.floor (Math.random () *3) + 3)/10) * (Math.random () *2-1 > 0 1:-1) *.25;
var wpos = 0;
var Wcount;
return {
Init:function () {
Wcount = + Math.floor (math.random () * 100);
for (var i=0; i<count; i++) {
var color = 0xff0000;
color = (Math.random () * 0xFFFFFF). ToString (). ToString (). Split (".") [0];
while (Color.length < 6) {
color = "0" + color;
}
var fire = new Fire (color);
Fires.push (fire);
Fire.ypos =-100;
Fire.vz = Math.random () * 6-3;
FIRE.VX = (Math.random () *2-1) *2;
Fire.vy = Math.random () *-15-15;
fire.x = 500
FIRE.Y = 600;
Fire.append (document.body);
}
var that = this;
Timer = setinterval (function () {
wpos++;
if (Wpos >= wcount) {
Wpos = 0;
Wcount = + Math.floor (math.random () * 100);
Wind = ((Math.floor (Math.random () *3) + 3)/10) * (Math.random () *2-1 > 0 1:-1) *.25;
}
for (var i=0;i<count; i++) {
That.move (Fires[i]);
}
}, 30);
},
Move:function (Fire) {
Fire.vy + = gravity;
Fire.x + = FIRE.VX;
Fire.y + = Fire.vy;
FIRE.VX + = wind;
Fire.setposition (fire.x, fire.y);
if (fire.x < 0 | | fire.x >1000 | | fire.y < 0 | | fire.y > 600) {
FIRE.VX = (Math.random () *2-1) *2;
Fire.vy = Math.random () *-15-15;
fire.x = 500;
FIRE.Y = 600;
Fire.setposition (fire.x, fire.y);
}
}
}
}
Fireworks (). Init ();
</script>
I hope this article will help you with your JavaScript programming.
