js烟花效果,用javascript编写的网页烟花

　　谈到网页特效，其实很多时候都是说的js，对于js相信大家都不陌生吧，如果您还不懂，请阅读由烈火提供的javascript手册，本文讲到的烟花效果就是利用了js编写而成，实例效果：先升空再扩散开，很酷，很过瘾，用做网页背景超不错，敬请收藏。

　　代码与演示：

<!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=GBK" /> <title>Js烟花效果 - Liehuo.Net</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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

js烟花效果,用javascript编写的网页烟花

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

js烟花效果,用javascript编写的网页烟花

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀