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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php 静态化实现代码
2009/03/20 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
替换python字典中的key值方法
2018/07/06 Python
python连接mongodb密码认证实例
2018/10/16 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
体育比赛口号
2014/06/09 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
学生会个人总结范文
2015/02/15 职场文书
求职信格式范文
2015/03/19 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技