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 相关文章推荐
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
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
php动态生成版权所有信息的方法
2015/03/24 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python如何制作英文字典
2019/06/25 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Python中如何引入第三方模块
2020/05/27 Python
Python用户自定义异常的实现
2020/12/25 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
总经理助理的职责
2014/03/14 职场文书
年终考核实施方案
2014/05/26 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
个人自查自纠材料
2014/10/14 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
导游词欢迎词
2015/02/02 职场文书
保研导师推荐信
2015/03/25 职场文书
医院病假条怎么写
2015/08/17 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
python超详细实现完整学生成绩管理系统
2022/03/17 Python