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

2019-11-20 11:24:15

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS基于VML技术实现的五角星礼花效果代码。分享给大家供大家参考，具体如下：

这里演示的五角星礼花，基于HTML+js+VML技术共同编写实现，打开页面即可看到礼花绽放效果，五角星符号可以换成其它的符号，本效果可轻松修改成烟花升空爆炸特效，不过你要事先制作一个烟花的GIF小图，然后替换掉五角星。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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程序设计有所帮助。

上一篇：javaScript实现可缩放的显示区效果代码

下一篇：jquery获取url参数及url加参数的方法