The example of this article tells JS based on VML technology to achieve the Pentagram fireworks effect code. Share to everyone for your reference, specific as follows:
Here demo of the Pentagram fireworks, based on HTML+JS+VML technology together to write implementation, open the page can see fireworks bloom effect, the pentagram symbol can be replaced by other symbols, this effect can be easily modified into fireworks explosion effect, but you have to make a fireworks GIF small map, and then replace the pentagram.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/
The specific code is as follows:
<HTML> <HEAD> <TITLE> Pentagram Fireworks </TITLE> <meta http-equiv=content-type content= "text/html; charset=gb2312 "> </HEAD> <body bgcolor= #fef4d9 > <CENTER> <table bordercolor= #00FF00 border=5 borderlight= "Green" > <TBODY> <TR> <td align=middle><!--[if IE]> <style type=text/css& Gt Body {Overflow:hidden} v\:* {behavior:url (#default #vml)} </STYLE> <!
[endif]--><!--[If IE]> <script language=javascript> colors = new Array ();
Colors[0] = new Array (' Yellow ', ' lime ');
COLORS[1] = new Array (' Silver ', ' green ') colors[2] = new Array (' Silver ', ' blue ');
COLORS[3] = new Array (' Silver ', ' purple ');
COLORS[4] = new Array (' Purple ', ' white ');
COLORS[5] = new Array (' Blue ', ' silver ');
COLORS[6] = new Array (' Red ', ' fuchsia ');
COLORS[7] = new Array (' Yellow ', ' red ');
Define the maximum number of fire arrows maximum = 1000;
Vmlobj= '; for (i = 0; i < i++) {vmlobj = ' <div id= ' ster ' +i+' "style=" position:absolute; left:-50px; top-50px; Visibility:hidden; z-index:50; "
> '; Vmlobj + = ' <v:shape style= ' width:15px;
height:15px, "fillcolor=" yellow "coordorigin=" 0,0 "coordsize=" ">";
Vmlobj + = ' <v:path v= ' m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e "/>";
Vmlobj + = ' <v:stroke on= ' false '/></v:shape></div> '; } document.write (Vmlobj);
Vmlobj = null;
aantal = 0;
Function begin () {try {if (aantal = = maximum) {return;}
Kleurschema = Math.floor (Math.random () * colors.length);
Poslinks = Math.floor (Math.random () * (document.body.clientwidth-180)); Poslinks = (Poslinks < 170)?
170:poslinks;
Posboven = Math.floor (Math.random () * (document.body.clientheight-180)); Posboven = (Posboven < 170)?
170:posboven; Straal = 0; Uiteen = true; Teller = 1;
Flikkereffect = false; for (var i = 0; i < i++) {document.getelementsbytagname (' shape ') [I].setattribute (' FillColor ', Colors[kleurschema] [0]); document.getElementById (' ster ' +i). style.visibility = ' hidden ';
5.0 fix document.getElementById (' ster ' +i). Style.left = Poslinks;
document.getElementById (' ster ' +i). Style.top = Posboven;
} document.getElementById (' Ster0 '). Style.top = (document.body.clientheight-20);
document.getElementById (' Ster0 '). style.visibility = ' visible ';
Omhoog ();
The catch (e) {}} function Omhoog () {try {Positie = parseint (document.getElementById (' Ster0 '). Style.top);
if (Positie > Posboven) {document.getElementById (' Ster0 '). Style.top = (positie-25);
SetTimeout (' Omhoog () ', 50);
else {for (i = 1; i < i++) {document.getElementById (' ster ' +i). Style.top = Positie;
document.getElementById (' ster ' +i). style.visibility = ' visible ';
} uiteenspatten (); The catch (e) {}} function Uiteenspatten () {try {if (Straal > && Straal% = 0) {Flikkereffect = True
; Teller = (Teller = = colors[kleurschema].length)?
0: (teller+1); for (var i = 0; i < i++) {var hoEK = i * 30;
var Pihoek = math.pi-math.pi/180 * Hoek;
var links = poslinks + Math.Round (Straal * Math.sin (Pihoek));
var boven = Positie + math.round (Straal * Math.Cos (Pihoek));
document.getElementById (' ster ' +i). Style.left = links;
document.getElementById (' ster ' +i). Style.top = Boven; if (flikkereffect) {document.getelementsbytagname (' shape ') [I].setattribute (' FillColor ', colors[kleurschema][
Teller]);
} if (Straal < 160 && uiteen) {Straal = = (Straal < 120)? 10:5;
SetTimeout (' Uiteenspatten () ', 50);
else if (Straal >) {uiteen = false; Straal = 5;
SetTimeout (' Uiteenspatten () ', 50); else if (Straal <=) {for (var i = 0; i < i++) {document.getElementById (' ster ' +i). style.visibility = ' Hidd
En ';
} aantal++;
SetTimeout (' Begin () ', 500);
The catch (e) {}} Window.onload=begin; </SCRIPT> <! [endif]--></td></tr></tbody></table></center> </BODY> </HTML>
I hope this article will help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
