请选择 进入手机版 | 继续访问电脑版

爱Q粉丝网

搜索
查看: 429|回复: 0
收起左侧

[JS特效] 一款绚丽的烟花特效JS代码

[复制链接]

197

主题

202

帖子

777

积分

管理员

Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

积分
777

灌水之王优秀版主荣誉管理论坛元老

发表于 2020-5-18 03:33:13 | 显示全部楼层 |阅读模式


具体的效果是:先升空再扩散开,很酷,很炫,用做网页背景特效超赞,建议大家收藏一下!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
  5. <title>Js烟花效果 - Jishuyl.Com</title>
  6. <script type="text/javascript">
  7. var fireworks = function(){
  8. this.size = 20;
  9. this.rise();
  10. }
  11. fireworks.prototype = {
  12. color:function(){
  13. var c = ['0','3','6','9','c','f'];
  14. var t = [c[Math.floor(Math.random()*100)%6],'0','f'];
  15. t.sort(function(){return Math.random()>0.5?-1:1;});
  16. return '#'+t.join('');
  17. },
  18. aheight:function(){
  19. var h = document.documentElement.clientHeight-250;
  20. return Math.abs(Math.floor(Math.random()*h-200))+201;
  21. },
  22. firecracker:function(){
  23. var b = document.createElement('div');
  24. var w = document.documentElement.clientWidth;
  25. b.style.position = 'absolute';
  26. b.style.color = this.color();
  27. b.style.bottom = 0;
  28. b.style.left = Math.floor(Math.random()*w)+1+'px';
  29. document.body.appendChild(b);
  30. return b;
  31. },
  32. rise:function(){
  33. var o = this.firecracker();
  34. var n = this.aheight();
  35. var c = this.color;
  36. var e = this.expl;
  37. var s = this.size;
  38. var k = n;
  39. var m = function(){
  40. o.style.bottom = parseFloat(o.style.bottom)+k*0.1+'px';
  41. k-=k*0.1;
  42. if(k<2){
  43. clearInterval(clear);
  44. e(o,n,s,c);
  45. }
  46. }
  47. o.innerHTML = '.';
  48. if(parseInt(o.style.bottom)<n){
  49. var clear = setInterval(m,20);
  50. }
  51. },
  52. expl:function(o,n,s,c){
  53. var R=n/3,Ri=n/6,Rii=n/9;
  54. var r=0,ri=0,rii=0;
  55. for(var i=0;i<s;i++){
  56. var span = document.createElement('span');
  57. var p = document.createElement('i');
  58. var a = document.createElement('a');
  59. span.style.position = 'absolute';
  60. span.style.fontSize = n/10+'px';
  61. span.style.left = 0;
  62. span.style.top = 0;
  63. span.innerHTML = '*';
  64. p.style.position = 'absolute';
  65. p.style.left = 0;
  66. p.style.top = 0;
  67. p.innerHTML = '*';
  68. a.style.position = 'absolute';
  69. a.style.left = 0;
  70. a.style.top = 0;
  71. a.innerHTML = '*';
  72. o.appendChild(span);
  73. o.appendChild(p);
  74. o.appendChild(a);
  75. }
  76. function spr(){
  77. r += R*0.1;
  78. ri+= Ri*0.06;
  79. rii+= Rii*0.06;
  80. sp = o.getElementsByTagName('span');
  81. p = o.getElementsByTagName('i');
  82. a = o.getElementsByTagName('a');
  83. for(var i=0; i<sp.length;i++){
  84. sp[i].style.color = c();
  85. p[i].style.color = c();
  86. a[i].style.color = c();
  87. sp[i].style.left=r*Math.cos(360/s*i)+'px';
  88. sp[i].style.top=r*Math.sin(360/s*i)+'px';
  89. sp[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
  90. p[i].style.left=ri*Math.cos(360/s*i)+'px';
  91. p[i].style.top=ri*Math.sin(360/s*i)+'px';
  92. p[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
  93. a[i].style.left=rii*Math.cos(360/s*i)+'px';
  94. a[i].style.top=rii*Math.sin(360/s*i)+'px';
  95. a[i].style.fontSize=parseFloat(sp[i].style.fontSize)*0.96+'px';
  96. }
  97. R-=R*0.1;
  98. if(R<2){
  99. o.innerHTML = '';
  100. o.parentNode.removeChild(o);
  101. clearInterval(clearI);
  102. }
  103. }
  104. var clearI = setInterval(spr,20);
  105. }
  106. }
  107. window.onload = function(){
  108. function happyNewYear(){
  109. new fireworks();
  110. }
  111. setInterval(happyNewYear,1000);
  112. }
  113. </script>
  114. <style type="text/css"></style>
  115. </head>
  116. <body style="background:#000;font:12px Georgia, 'Times New Roman', Times, serif">
  117. </body>
  118. </html> <br/><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.iqfsw.com/' target='_blank'>http://www.iqfsw.com/</a></center>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表