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

前端技术 2023/09/06 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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 arrows
maximum = 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15009

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案