分享几种超漂亮的JS烟花 - 在线学习网 - ITeye博客

`

charrysong

浏览: 50488 次
性别:
来自: 广州

最近访客更多访客>>

wygw

wy_2017

君子之交淡于水

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

lteb2002：这个功能用Java Applet也是非常好实现的，可以自动将粘 ...
kindeditor/ckeditor编辑器加+图片自动上传成功

分享几种超漂亮的JS烟花

JavaScript js烟花漂亮

阅读更多

今天看到蓝色理想有几个哥们都发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享!

转自：http://www.ok22.org/art_detail.aspx?id=176(可直接运行)

Html代码

复制代码

<script type="text/javascript">
	var fireworks = function(){
	 this.size = 20;
	 this.rise();
	}
	fireworks.prototype = {
	 color:function(){
	  var c = ['0','3','6','9','c','f'];
	  var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
	  t.sort(function(){return Math.random()>0.5?-1:1;});
	  return '#'+t.join('');
	 },
	 aheight:function(){
	  var h = document.documentElement.clientHeight-250;
	  return Math.abs(Math.floor(Math.random()*h-200))+201;
	 },
	 firecracker:function(){
	  var b = document.createElement('div');
	  var w = document.documentElement.clientWidth;
	  b.style.position = 'absolute';
	  b.style.color = this.color();
	  b.style.bottom = 0;
	  b.style.left = Math.floor(Math.random()*w)+1+'px';
	  document.body.appendChild(b);
	  return b;
	 },
	 rise:function(){
	  var o = this.firecracker();
	  var n = this.aheight();
	  var c = this.color;
	  var e = this.expl;
	  var s = this.size;
	  var k = n;
	  var m = function(){
	   o.style.bottom = parseFloat(o.style.bottom)+k*0.1+'px';
	   k-=k*0.1;
	   if(k<2){
	    clearInterval(clear);
	    e(o,n,s,c);
	   }
	  }
	  o.innerHTML = '.';
	  if(parseInt(o.style.bottom)<n){
	   var clear = setInterval(m,20);
	  }
	 },
	 expl:function(o,n,s,c){
	  var R=n/3,Ri=n/6,Rii=n/9;
	  var r=0,ri=0,rii=0;
	  for(var i=0;i<s;i++){
	   var span = document.createElement('span');
	   var p = document.createElement('i');
	   var a = document.createElement('a');
	   span.style.position = 'absolute';
	   span.style.fontSize = n/10+'px';
	   span.style.left = 0;
	   span.style.top = 0;
	   span.innerHTML = '*';
	   p.style.position = 'absolute';
	   p.style.left = 0;
	   p.style.top = 0;
	   p.innerHTML = '*';
	   a.style.position = 'absolute';
	   a.style.left = 0;
	   a.style.top = 0;
	   a.innerHTML = '*';
	   o.appendChild(span);
	   o.appendChild(p);
	   o.appendChild(a);
	  }
	  function spr(){
	   r += R*0.1;
	   ri+= Ri*0.06;
	   rii+= Rii*0.06;
	   sp = o.getElementsByTagName('span');
	   p = o.getElementsByTagName('i');
	   a = o.getElementsByTagName('a');
	   for(var i=0; i<sp.length;i++){
	    sp[i].style.color = c();
	    p[i].style.color = c();
	    a[i].style.color = c();
	    sp[i].style.left=r*Math.cos(360/s*i)+'px';
	    sp[i].style.top=r*Math.sin(360/s*i)+'px';
	    sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	    p[i].style.left=ri*Math.cos(360/s*i)+'px';
	    p[i].style.top=ri*Math.sin(360/s*i)+'px';
	    p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	    a[i].style.left=rii*Math.cos(360/s*i)+'px';
	    a[i].style.top=rii*Math.sin(360/s*i)+'px';
	    a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
	   }
	   R-=R*0.1;
	   if(R<2){
	    o.innerHTML = '';
	    o.parentNode.removeChild(o);
	    clearInterval(clearI);
	   }
	  }
	  var clearI = setInterval(spr,20);
	 }
	}
	window.onload = function(){
	 function happyNewYear(){
	  new fireworks();
	 }
	 setInterval(happyNewYear,1000);
	}
	</script>
	<style type="text/css">
	</style>
	</head>
	<body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif">
	</body>
	</html>

Html代码

复制代码

<!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=utf-8" />
<title>firework - Zehee</title>
<script type="text/javascript">
var firework = function(){
 this.size = 40;
 this.speed = 0.1;
 this.rise();
}
firework.prototype = {
 color:function(){
  var c = ['0','3','6','9','c','f'];
  var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
  t.sort(function(){return Math.random()>0.5?-1:1;});
  return '#'+t.join('');
 },
 aheight:function(){
  var h = document.documentElement.clientHeight;
  return Math.abs(Math.floor(Math.random()*h-200))+201;
 },
 firecracker:function(){
  var b = document.createElement('div');
  var w = document.body.clientWidth;
  b.style.color = this.color();
  b.style.position = 'absolute';
  b.style.bottom = 0;
  b.style.left = Math.floor(Math.random()*w)+1+'px';
  document.body.appendChild(b);
  return b;
 },
 rise:function(){
  var o = this.firecracker();
  var n = this.aheight();
  var speed = this.speed;
  var e = this.expl;
  var s = this.size;
  var k = n;
  var m = function(){
   o.style.bottom = parseFloat(o.style.bottom)+k*speed+'px';
   k-=k*speed;
   if(k<2){
    clearInterval(clear);
    e(o,n,s,speed);
   }
  }
  o.innerHTML = '*';
  if(parseInt(o.style.bottom)<n){
   var clear = setInterval(m,20);
  }
 },
 expl:function(o,n,s,speed){
  var R = n/3;
  var Ri = n/6;
  var r = 0;
  var ri = 0;
  for(var i=0;i<s;i++){
   var span = document.createElement('span');
   var p = document.createElement('p');
   span.style.position = 'absolute';
   span.style.left = 0;
   span.style.top = 0;
   span.innerHTML = '*';
   p.style.position = 'absolute';
   p.style.left = 0;
   p.style.top = 0;
   p.innerHTML = '+';
   o.appendChild(span);
   o.appendChild(p);
  }
  function spr(){
   r += R*speed;
   ri+= Ri*speed/2;
   sp = o.getElementsByTagName('span');
   p = o.getElementsByTagName('p');
   for(var i=0; i<sp.length;i++){
    sp[i].style.left=r*Math.cos(360/s*i)+'px';
    sp[i].style.top=r*Math.sin(360/s*i)+'px';
    p[i].style.left=ri*Math.cos(360/s*i)+'px';
    p[i].style.top=ri*Math.sin(360/s*i)+'px';
   }
   R-=R*speed;
   if(R<2){
    clearInterval(clearI);
    o.parentNode.removeChild(o);
   }
  }
  var clearI = setInterval(spr,20);
 }
}
window.onload = function(){
 function happyNewYear(){
  new firework();
 }
 setInterval(happyNewYear,400);
}
</script>
<style type="text/css">
</style>
</head>
<body style="background:#000;font:12px Arial">
</body>
</html>

Html代码

复制代码

<!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>
    <title>Untitled Page</title>
</head>
<style type="text/css">
.fire{display:block; overflow:hidden; font-size:12px; position:absolute};
body{overflow:hidden; background:#000}
html{overflow:hidden; background:#000}
</style>
<body>
</body>
<script type="text/javascript">
var Fire = function(r, color) {
	this.radius = r || 12;
	this.color = color || "FF6600";
	this.xpos = 0;
	this.ypos = 0;
	this.zpos = 0;
	this.vx = 0;
	this.vy = 0;
	this.vz = 0;
	this.mass = 1;
	this.p = document.createElement("span");
	this.p.className = "fire";
	this.p.innerHTML = "*";
	this.p.style.fontSize = this.radius + "px";
	this.p.style.color = "#" + this.color;
}
Fire.prototype = {
	append: function(parent) {
		parent.appendChild(this.p);
	},
	setSize: function(scale) {
		this.p.style.fontSize = this.radius * scale + "px";
	},
	setPosition:function(x, y) {
		this.p.style.left = x + "px";
		this.p.style.top =  y + "px";
	},
	setVisible: function(b) {
		this.p.style.display = b ? "block" : "none";
	}
}
var fireworks = function() {
	var fires = new Array();
	var count = 100;
	var fl = 250;
	var vpx = 500;
	var vpy = 300;
	var gravity = .3;
	var floor = 200;
	var bounce = -.8;
	var timer;
	return {
		init: function() {
			for (var i=0; i<count; i++) {
				var color = 0xFF0000;
				color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0];
				while(color.length < 6) {
					color = "0" + color;
				}
				var fire = new Fire(12, color);
				fires.push(fire);
				fire.ypos = -100;
				fire.vx = Math.random() * 6 - 3;
				fire.vy = Math.random() * 6 - 3;
				fire.vz = Math.random() * 6 - 3;
				fire.append(document.body);
			}
			var that = this;
			timer = setInterval(function() {
				for (var i=0;i<count; i++) {
					that.move(fires[i]);
				}
			}, 30);
		},
		move: function(fire) {
			fire.vy += gravity;
			fire.xpos += fire.vx;
			fire.ypos += fire.vy;
			fire.zpos += fire.vz;
			if (fire.ypos > floor) {
				fire.ypos = floor;
				fire.vy *= bounce;
			}
			if (fire.zpos > -fl) {
				var scale = fl/ (fl+fire.zpos);
				fire.setSize(scale);
				fire.setPosition(vpx + fire.xpos * scale,
								 vpy + fire.ypos * scale);
				fire.setVisible(true);
			} else {
				fire.setVisible(false);
			}
		}
	}
}
fireworks().init();
</script>
</html>

Html代码

复制代码

分享到：

如何解决IE6 img与元素边界有空隙问题 | (收藏)清理浮动的全家

2011-07-18 09:32
浏览 679
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

C#使用OpenGL实现的超漂亮的烟花粒子系统: C#使用OpenGL实现的超漂亮的烟花粒子系统，采用OpenGL的方式，随机生成上万个随机颜色的三维的烟花粒子，非常漂亮。

超漂亮的烟花PPT模板效果复制直接可用: 超漂亮的烟花PPT模板效果复制直接可用

js烟花效果前端: 在前端开发中，创建绚丽的视觉效果是一种常见的需求，而“js烟花效果”就是其中之一。这一效果通过JavaScript编程实现，可以为网站增添节日氛围或提升用户体验。本文将深入探讨如何利用JavaScript来创建前端的烟花...

html+js 夜空烟花特效，可自定义文字特效烟花: `city.png` 可能代表繁华的城市夜景，为烟花提供了一个现实的展示舞台，而 `moon.png` 可能是夜空中的一轮明月，增添了几分浪漫氛围。这些静态图片与动态的烟花相融合，共同创造出一个完整的视觉场景。总的来说，...

网页背景烟花特效（超炫酷，HTML\CSS\JS）: 网页背景烟花特效是一种常见的视觉设计手法，用于提升网站的互动性和视觉吸引力，尤其适用于庆祝活动如生日、节日或婚庆等场合。这个超炫酷的烟花特效是通过结合HTML、CSS和JavaScript技术实现的，接下来我们将详细...

HTML5实现五彩烟花动画特效，canvas炫彩烟火，高质量js源代码！: HTML5实现五彩烟花动画特效，canvas炫彩烟火，高质量js源代码！ HTML5实现五彩烟花动画特效，canvas炫彩烟火，高质量js源代码！ HTML5实现五彩烟花动画特效，canvas炫彩烟火，高质量js源代码！ HTML5实现五彩烟花...

跨年烟花代码-javascript烟花星空魔法师源代码下载: JavaScript是一种广泛用于网页开发的脚本语言，它允许动态内容的创建，如动画、交互式表单以及我们这里提到的烟花效果。JavaScript代码通常嵌入HTML文档中，或者作为外部文件链接到网页上。 2. DOM操作：在这个...

烟花效果JS+CSS+HTML: 这个项目结合了JavaScript、CSS和HTML三种核心技术，为网页添加了动态的烟花绽放效果，使用户在浏览网页时能感受到节日般的氛围。首先，让我们深入了解一下HTML（超文本标记语言）。HTML是网页的基础，它定义了...

js实现烟花效果代码.rar: js实现的烟花效果，使用鼠标点击页面查看烟花爆炸效果

js烟花效果: JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，尤其是前端领域。在这个场景中，我们关注的是一个名为“js烟花效果”的项目，它提供了一个封装好的JS库，用于在网页上实现动态的...

html5烟花特效代码,漂亮的JavaScript烟花特效代码: 新年烟花代码html，html5烟花特效代码,漂亮的JavaScript烟花特效代码

基于C++语言实现的非常漂亮的祝福烟花效果完整源码: 基于C++语言实现的非常漂亮的祝福烟花效果完整源码基于C++语言实现的非常漂亮的祝福烟花效果完整源码基于C++语言实现的非常漂亮的祝福烟花效果完整源码基于C++语言实现的非常漂亮的祝福烟花效果完整源码基于C++...

跨年烟花代码JavaScript烟花特效.zip: 跨年烟花代码.zipJavaScript烟花特效，内附详细说明和效果图。跨年烟花代码.zipJavaScript烟花特效，内附详细说明和效果图。跨年烟花代码.zipJavaScript烟花特效，内附详细说明和效果图。跨年烟花代码.zipJavaScript...

JS特效-浪漫烟花源码: JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用中的动态效果和交互实现。在这个“JS特效-浪漫烟花源码”中，我们探讨的是如何利用JavaScript来创建一个富有浪漫气息的烟花绽放动画。这个特效...

JS实现烟花特效-海拥.zip: 总的来说，这个“JS实现烟花特效”项目为初学者提供了一个学习JavaScript动画和交互的实例。通过研究和理解这个项目，你可以了解到如何利用HTML、CSS和JavaScript来创建动态的前端效果，这对于提升前端开发技能是...

html js烟花特效脚本: 总结来说，"html js烟花特效脚本"是一个通过HTML和JavaScript实现的互动网页特效，它展示了这两种技术的结合如何创造出引人入胜的视觉体验。通过理解上述知识点，开发者可以自己动手创建出类似的动态效果，提升网页...

用Python写几种不同的烟花效果-烟花代码.rar: 这个“用Python写几种不同的烟花效果-烟花代码.rar”压缩包很可能包含了几个不同版本的烟花模拟程序，让我们来详细探讨一下如何在Python中创建烟花效果及其相关知识点。首先，我们需要了解的Python库是`pygame`，...

js表白特效，烟花绚烂绽放，浪漫表白的最佳方式，让女生心动的源代码！: js表白特效，烟花绚烂绽放，浪漫表白的最佳方式，让女生心动的源代码！ js表白特效，烟花绚烂绽放，浪漫表白的最佳方式，让女生心动的源代码！ js表白特效，烟花绚烂绽放，浪漫表白的最佳方式，让女生心动的源代码！...

javascript实现的烟花燃放的效果: JavaScript是一种广泛应用于网页和互联网应用的编程语言，它在网页动态效果、用户交互以及游戏开发等领域有着重要地位。本项目是使用JavaScript实现的烟花燃放效果，为网页增添视觉吸引力，提升用户体验。以下是对这...

漂亮的flash烟花素材: 在描述中提到的"漂亮的flash烟花素材"，我们可以理解为这是一种视觉效果，通过编程和艺术创作相结合，模拟真实的烟花绽放过程。这些素材通常包含多个不同的烟花动画，设计者可以通过调整颜色、速度、形状等参数，...

Global site tag (gtag.js) - Google Analytics