当前位置:首页 » 免费资源 » 分享一段JS烟花背景特效代码

分享一段JS烟花背景特效代码

夜空很多烟花,JS烟花特效,网面上的烟花效果,很不错哦,效果还有进一步优化的可能,希望大家和我一起完善它们。JavaScript烟花特效代码,与您分享,直接放入你需要放置的位置即可,代码如下:
<script>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>
End
关键词: js特效 烟花代码
温馨提示:如果您对本文有疑问,请在本页留言即可!!!
觉得很赞 (0)付款方式
X
付款方式:
  • 微信
  • 支付宝
  • QQ红包

使用微信扫一扫
blogger
    发布日期:2014-12-30   所属类别:免费资源   浏览:8011次   评论:2次
    本文地址:https://www.shuyong.net/resource/586.html [ 百度已收录 ]
    声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

1楼、唐瑞 [回复该留言]
2014-12-31 12:04
这是html5才能用吗
舍力(博主) [回复该留言]
2014-12-31 12:33
@唐瑞:有演示,自己看....

个人资料

舍力

博主:舍力

Emlog交流群

    用心做好每一件事!!!

博客统计

  • 文章数量:1132篇
  • 文章评论:3510条
  • 总访问量:9379686次
  • 微语数量:81条
  • 在线人数:3人
  • 本站运行:10年7月4天
  • 估计博主很忙,已经很久没更新了!
Q2 虚位以待
Copyright © 2024 舍力博客 版权所有   粤ICP备11021420号
基于宝塔面板,数据存储于阿里云ECS
Powered by emlog / &Author 舍力博客.