JavaScript实现的简单烟花特效代码


Posted in Javascript onOctober 20, 2015

本文实例讲述了JavaScript实现的简单烟花特效代码。分享给大家供大家参考,具体如下:

这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错?

运行效果截图如下:

JavaScript实现的简单烟花特效代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>礼花特效</title>
<style type="text/css">
 html,body{background:#000; height:100%; margin:0px; padding:0px;color:#FFF;}
 .ball{color:#FF0000; position:absolute; font-size:16px;}
 .star{color:#FF0000; position:absolute; font-size:4px;}
</style>
<script type="text/javascript">
function Fireworks(sky, loop){
 this.sky = sky;
 this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
 this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
 this.x = this.y = 0;
 this.step = 20;
 this.delay = 30;
 this.stars = [];
 this.r = 10;
 this.step2 = 7;
 this.radius = 90;
 this.angle = 45;
 this.num = 16;
 this.loop = loop;
 this.degree = 2;
 this.t = 0;
 this.delt = 0;
 this.max = 30;
 this.cur = 1;
 this.points = null;
}
Fireworks.prototype = {
 init : function(){
  this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;
  this.y = this.skyHeight;
  this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
 },
 setOpacity : function(obj, p){
  if(p > 85){
   var opacity = 100 - (p - 85) * 4;
   if(document.all){
    obj.style.filter = "alpha(opacity=" + opacity + ")"; 
   }else{
    obj.style.MozOpacity = opacity / 100;
   }
  }
 },
 getNextPoint : function(degree, coeff, t){
  var tt = 1.0 - t;
  for(var rr = 1; rr <= degree; rr++){
   for(var i=0; i <= degree-rr; i++){
    coeff[i] = tt * coeff[i] + t * coeff[i+1];
   }
  }
  return coeff[0];
 },
 showBall : function(){
  this.ball = document.createElement("div");
  this.ball.innerHTML = "●";
  this.ball.className = "ball";
  this.ball.style.left = this.x + "px";
  this.ball.style.top = this.y + "px";
  this.sky.appendChild(this.ball);
 },
 moveBall : function(){
  var self = this;
  if(this.y > this._y){
   var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
   this.y -= (this.step - p * 1.6);
   this.ball.style.fontSize = 16 - p + "px";
   this.ball.style.top = this.y + "px";
   setTimeout(function(){self.moveBall();}, this.delay);
  }else{
   this.fire();
  }
 },
 hideBall : function(){
  this.sky.removeChild(this.ball);
  this.ball = null;
 },
 showStars : function(){
  var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];
  var n = cs = parseInt(Math.random() * colors.length / 2);
  var cc = parseInt(Math.random() * colors.length / 2);
  var colorMode = parseInt(Math.random() * 2);
  var star = Math.round(Math.random()) == 1 ? "★" : "☆";
  this.r = 10;
  this.radius = Math.round(Math.random() * 30) + 60;
  this.num = Math.round(Math.random() * 5 + 5) * 2;
  this.angle = 180 / this.num * 2;
  for(var i=1; i<=this.num; i++){
   this.stars[i] = document.createElement("div");
   this.stars[i].innerHTML = star;
   this.stars[i].className = "star";
   if(colorMode == 1){
    this.stars[i].style.color = colors[n];
    if(++n > cs + cc)
     n = cs;
   }else{
    this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];
   }
   this.sky.appendChild(this.stars[i]);
  }
 },
 moveStars : function(){
  var self = this;
  if(this.r < this.radius){
   var p = this.step2 - parseInt(this.r / this.radius * 5);
   p = p < 1 ? 1 : p;
   this.r += p;
   p = parseInt(this.r / this.radius * 100);
   for(var i=1; i<=this.num; i++){
    this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
    this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
    this.stars[i].style.fontSize = 4 + p/10 + "px";
    this.setOpacity(this.stars[i], p);
   }
   setTimeout(function(){self.moveStars();}, this.delay);
  }else{
   setTimeout(function(){self.hideStars();}, 200 * Math.random());
  }
 },
 initBezier : function(){
  var coeff_x = [];
   var coeff_y = [];
  this.points = [];
  this.t = 0;
  this.delt = 1.0 / this.max;
  this.cur = 1;
  var a = parseInt(Math.random() * 5) * 90;
  coeff_x[0] = this.x;
  coeff_y[0] = this.y;
  for(var i=1; i<=this.num; i++){
   coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
   coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
   coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
   coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
   this.points[(i-1)*2] = coeff_x.slice(0);
   this.points[(i-1)*2+1] = coeff_y.slice(0);
  }
 },
 moveStars2 : function(){
  var self = this;
  if(this.cur < this.max){
   this.t += this.delt;
   this.cur++;
   p = parseInt(this.cur / this.max * 100);
   for(var i=1; i<=this.num; i++){
    this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px";
    this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px";
    this.stars[i].style.fontSize = 4 + p/10 + "px";
    this.setOpacity(this.stars[i], p);
   }
   setTimeout(function(){self.moveStars2();}, this.delay);
  }else{
   setTimeout(function(){self.hideStars();}, 200 * Math.random());
  }
 },
 hideStars : function(){
  for(var i=1; i<=this.num; i++){
   this.sky.removeChild(this.stars[i]);
   this.stars[i] = null;
   if(this.points != null){
    delete this.points[(i-1)*2];
    delete this.points[(i-1)*2+1];
   }
  }
  if(this.points){
   delete this.points;
  }
  this.points = null;
  if(this.loop){
   this.play();
  }
 },
 fire : function(){
  this.hideBall();
  this.showStars();
  var effect = parseInt(Math.random() * 2) + 1;
  switch(effect){
   case 1:
    this.moveStars();
    break;
   case 2:
    this.initBezier();
    this.moveStars2();
    break;
  }
 },
 play : function(){
  this.init();
  this.showBall();
  this.moveBall();
 }
};
window.onload = function(){
 for(var i=0; i<5; i++)
  new Fireworks(document.body, true).play();
};
</script>
</head>
<body>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
require.js的用法详解
Oct 20 #Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 #Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 #Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 #Javascript
js验证身份证号有效性并提示对应信息
Oct 19 #Javascript
详解JavaScript数组的操作大全
Oct 19 #Javascript
全系IE支持Bootstrap的解决方法
Oct 19 #Javascript
You might like
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
nodejs中实现阻塞实例
2015/03/24 NodeJs
javascript实现全角半角检测的方法
2015/07/23 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
微信小程序实现折线图的示例代码
2019/06/07 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python的迭代器和生成器
2015/07/29 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
先进党支部事迹材料
2014/01/13 职场文书
119消防日活动总结
2014/08/29 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
健康教育主题班会
2015/08/14 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers