js烟花效果[二],同时燃放出多个漂亮花环

　　昨天烈火发布了使用js编写的烟花特效代码，今天再来看JavaScript放烟花的代码二，与第一种的区别在于烟花展开的样式不同，其实这个样式是可以调整的，我们只要了解相关网页知识就可以了，费话不多说了，一起来看看。

　　实例特效与代码：

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

热点

js烟花效果[二],同时燃放出多个漂亮花环

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

js烟花效果[二],同时燃放出多个漂亮花环

由 dawei

相关文章

网站优化的整个完整步骤

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

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

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性