Home > Developer > JavaScript
JS five-star gift effect code based on VML technology, vml gift
The example in this article describes the five-star gift effect code of JS Based on VML technology. We will share this with you for your reference. The details are as follows:
The five-star gift flower demonstrated here is written and implemented based on HTML + js + VML technology. When you open the page, you can see the blooming effect of the gift flower. The five-star symbol can be replaced with other symbols, this effect can be easily changed to a fireworks blast effect, but you need to make a fireworks GIF in advance, and then replace the pentagram.
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 Code is as follows:
<HTML> <HEAD> <TITLE> pentagram </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> 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 maxim Um number of fire arrowsmaximum = 1000; vmlobj = ''; for (I = 0; I <12; 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 =" 200 "coordsize =" 200 "> '; vmlobj + =' <v: path v =" m l, 11, 122,100,142,155, 92,121, 42,155, 60, 1 00 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 <12; I ++) {document. getElementsByTagName ('shape') [I]. setAttribute ('fillcolor', colors [kleurschema] [0]); document. getElementById ('ster' + I ). style. visibility = 'hiden '; // 5.0 fix document. getElementById ('ster' + I ). style. left = posLinks; document. getElementById ('ster' + I ). style. top = posBoven;} document. get ElementById ('ster0 '). style. top = (document. body. clientHeight-20); document. getElementById ('ster0 '). style. visibility = 'visable'; omhoog ();} 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 <12; I ++) {document. get ElementById ('ster' + I ). style. top = positie; document. getElementById ('ster' + I ). style. visibility = 'visable';} uiteenspatten () ;}} catch (e) {}} function uiteenspatten () {try {if (straal> 120 & straal % 10 = 0) {flikkereffect = true; teller = (teller = colors [kleurschema]. length )? 0: (teller + 1) ;}for (var I = 0; I <12; 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> 120) {uiteen = false; straal-= 5; setTimeout ('uiteenspatten () ', 50);} else if (straal <= 120) {for (var I = 0; I <12; I ++) {document. getElementById ('ster' + I ). style. visibility = 'den den ';} aantal ++; setTimeout ('beginin ()', 500) ;}} catch (e) {}} window. onload = begin; </SCRIPT> <! [Endif] --> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>
I hope this article will help you design JavaScript programs.
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
