杰晶网络

JavaScript实现的简单烟花特效代码
网络编程 2024/11/9 佚名
3 2

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

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

运行效果截图如下：

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

在线演示地址如下：

http://demo.jb51.net/js/2015/js-yh-explode-style-demo/

具体代码如下：

<!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 "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,烟花特效
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“JavaScript实现的简单烟花特效代码”
暂无“JavaScript实现的简单烟花特效代码”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网