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 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
详解vue项目构建与实战
Jun 27 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php使用GeoIP库实例
2014/06/27 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
Django的Modelforms用法简介
2019/07/27 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python实现大量图片重命名
2020/03/23 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python中tab键是什么意思
2020/06/18 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
SQL数据库笔试题
2016/03/08 面试题
儿科护理实习自我鉴定
2013/09/19 职场文书
运动会演讲稿
2014/05/07 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
酒会开场白大全
2015/06/01 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
MySQL单表千万级数据处理的思路分享
2021/06/05 MySQL
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏