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


Posted in Javascript onOctober 26, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
ES7之Async/await的使用详解
Mar 28 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 #Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 #Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
社团活动策划书范文
2014/01/09 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
节约用水的口号
2014/06/20 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers