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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
js星星评分效果
Jul 24 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
拖动时防止选中
Feb 03 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
如何在 Vue 中使用 JSX
Feb 14 Vue.js
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正则提取或替换img标记属性
2013/06/26 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
PHP守护进程实例
2015/03/06 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
老生常谈Python基础之字符编码
2017/06/14 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
浅谈Python中的字符串
2020/06/10 Python
python中random模块详解
2021/03/01 Python
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
三个Unix的命令面试题
2015/04/12 面试题
消防安全宣传口号
2014/06/10 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
西湖英语导游词
2015/02/06 职场文书
行政上诉状范文
2015/05/23 职场文书
小学数学教学反思范文
2016/02/16 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
Go语言应该什么情况使用指针
2021/07/25 Golang
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server