JS基于VML技术实现的五角星礼花效果代码

本文实例讲述了JS基于VML技术实现的五角星礼花效果代码。分享给大家供大家参考，具体如下：
这里演示的五角星礼花，基于HTML+js+VML技术共同编写实现，打开页面即可看到礼花绽放效果，五角星符号可以换成其它的符号，本效果可轻松修改成烟花升空爆炸特效，不过你要事先制作一个烟花的GIF小图，然后替换掉五角星。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-vml-wjx-style-demo/
具体代码如下：

<HTML><HEAD><TITLE>五角星礼花</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 maximum 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="0,0" coordsize="200 200">"; 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 < 12; 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（）;} 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.getElementById（"ster"+i）.style.top = positie;document.getElementById（"ster"+i）.style.visibility = "visible";}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 = "hidden"; } aantal++; setTimeout（"begin（）", 500）; }} catch（e） {}}window.onload=begin;</SCRIPT><！[endif]--></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

希望本文所述对大家JavaScript程序设计有所帮助。