分享几种JS烟花

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

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

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

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

jQuery 写法示例

682
来自专栏Pythonista

前端学习之jQuery

[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

691
来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

583
来自专栏对角另一面

读Zepto源码之fx_methods模块

fx 模块提供了 animate 动画方法,fx_methods 利用 animate 方法,提供一些常用的动画方法。所以 fx_methods 模块依赖于 f...

1990
来自专栏非著名程序员

自封装Android软键盘工具类ImeUtil

在我们的开发过程中,键盘的显示和隐藏是经常遇到的,因为在该显示的时候显示,该隐藏的时候隐藏是非常人性化的表现,不用用户再次的点击触发。为此,我专门写了一个工具类...

20610
来自专栏三好码农的三亩自留地

实现Activity滑动退出

很多应用在二级详情页面加入了滑动退出activity的效果,很方便,心血来潮,想着自己也来实现这个效果,就当做练手吧。

832
来自专栏吴小龙同學

微言之自定义分享PopupWindow

自定义分享PopupWindow,有需要的直接拿走。 效果预览 ? 核心代码 SharePopupWindow代码 1 2 3 4 5 6 7 8 9 ...

2758
来自专栏互联网开发者交流社区

语音合成

1662
来自专栏古时的风筝

使用ViewPager+Fragment实现选项卡切换效果

实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边...

3405
来自专栏落花落雨不落叶

block,inline,inline-block的区别

2568

扫码关注云+社区