网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

分享几种超漂亮的JS烟花

用声音读出全文关注我吧
 2011/7/4 14:36:24 阅读次数:9626

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

<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>

<!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>

<!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>


<!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;
	this.xpos = 0;
	this.ypos = 0;
	this.zpos = 0;
	this.vx = 0;
	this.vy = 0;
	this.vz = 0;
	this.mass = 1;
	this.x =0;
	this.y=0;
	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 = 150;
	var fl = 250;
	var vpx = 500;
	var vpy = 300;
	var gravity = .5;
	var floor = 200;
	var bounce = -.8;
	var timer;
	var wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;
	var wpos = 0;
	var wcount;
	return {
		init: function() {
			wcount = 50 + Math.floor(Math.random() * 100);
			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.vz = Math.random() * 6 - 3;
				fire.vx = (Math.random()*2 - 1)*2 ;
				fire.vy = Math.random()*-15 - 15;
				fire.x = 500
				fire.y = 600;
				fire.append(document.body);
			}
			var that = this;
			timer = setInterval(function() {
				wpos++;
				if (wpos >= wcount) {
					wpos = 0;
					wcount = 50 + Math.floor(Math.random() * 100);
					wind = ((Math.floor(Math.random()*3) + 3)/10)*(Math.random()*2 - 1 > 0 ? 1 : -1)*.25;
				}
				for (var i=0;i<count; i++) {
					that.move(fires[i]);
				}
			}, 30);
		},
		move: function(fire) {
			fire.vy += gravity;
			fire.x += fire.vx;
			fire.y += fire.vy;
			fire.vx += wind;
			fire.setPosition(fire.x, fire.y);
				if (fire.x < 0 || fire.x >1000 || fire.y  < 0 || fire.y  > 600) {
					fire.vx = (Math.random()*2 - 1)*2;
					fire.vy = Math.random()*-15 - 15;
					fire.x = 500;
					fire.y = 600;
					fire.setPosition(fire.x, fire.y);
				}
		}
	}
}
fireworks().init();
</script>
</html>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=176【分享几种超漂亮的JS烟花】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)

相关文章

阅读全文内容关闭

copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010
粤ICP备13053249号-1谷歌地图