免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

[分享] 新年到!放烟花!!!

点击记忆的属性,返回到深厚的友情,复制我们的曾经,粘贴到你的心灵,春节的到来,伴随着我的祝福,祝sclub所有坛友:一声咩,你吉祥;二声咩,你快乐;三声咩,你幸福;四声咩,你平安;五声咩,你健康;六声咩,你发达!祝你羊年大吉,洋洋得意哦!顺祝sclub越办越好!!!


在论坛放烟花吧,效果参看我论坛

代码如下:(放在第三方即可)
  1. <style type="text/css">
  2.     .ball{color:#FF0000; position:absolute; font-size:16px;}
  3.     .star{color:#FF0000; position:absolute; font-size:4px;}
  4. </style>
  5. <script type="text/javascript">
  6. function Fireworks(sky, loop){
  7.     this.sky = sky;
  8.     this.skyWidth = document.body.clientWidth || document.documentElement.clientWidth;
  9.     this.skyHeight= document.body.clientHeight || document.documentElement.clientHeight;
  10.     this.x = this.y = 0;
  11.     this.step = 20;
  12.     this.delay = 30;
  13.     this.stars = [];
  14.     this.r = 10;
  15.     this.step2 = 7;
  16.     this.radius = 90;
  17.     this.angle = 45;
  18.     this.num = 16;
  19.     this.loop = loop;
  20.     this.degree = 2;
  21.     this.t = 0;
  22.     this.delt = 0;
  23.     this.max = 30;
  24.     this.cur = 1;
  25.     this.points = null;
  26. }
  27. Fireworks.prototype = {
  28.     init : function(){
  29.         this.x = parseInt(this.skyWidth/1.3 * Math.random()) + this.skyWidth / 8;
  30.         this.y = this.skyHeight;
  31.         this._y = parseInt((this.skyHeight / 4) * Math.random()) + this.skyHeight / 5;
  32.     },
  33.     setOpacity : function(obj, p){
  34.         if(p > 85){
  35.             var opacity = 100 - (p - 85) * 4;
  36.             if(document.all){
  37.                 obj.style.filter = "alpha(opacity=" + opacity + ")";   
  38.             }else{
  39.                 obj.style.MozOpacity = opacity / 100;
  40.             }
  41.         }
  42.     },
  43.     getNextPoint : function(degree, coeff, t){
  44.         var tt = 1.0 - t;
  45.         for(var rr = 1; rr <= degree; rr++){
  46.             for(var i=0; i <= degree-rr; i++){
  47.                 coeff[i] = tt * coeff[i] + t * coeff[i+1];
  48.             }
  49.         }
  50.         return coeff[0];
  51.     },
  52.     showBall : function(){
  53.         this.ball = document.createElement("div");
  54.         this.ball.innerHTML = "●";
  55.         this.ball.className = "ball";
  56.         this.ball.style.left = this.x + "px";
  57.         this.ball.style.top = this.y + "px";
  58.         this.sky.appendChild(this.ball);
  59.     },
  60.     moveBall : function(){
  61.         var self = this;
  62.         if(this.y > this._y){
  63.             var p = parseInt((this.skyHeight - this.y) / (this.skyHeight - this._y)*10);
  64.             this.y -= (this.step - p * 1.6);
  65.             this.ball.style.fontSize = 16 - p + "px";
  66.             this.ball.style.top = this.y + "px";
  67.             setTimeout(function(){self.moveBall();}, this.delay);
  68.         }else{
  69.             this.fire();
  70.         }
  71.     },
  72.     hideBall : function(){
  73.         this.sky.removeChild(this.ball);
  74.         this.ball = null;
  75.     },
  76.     showStars : function(){
  77.         var colors = ['#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00','#FF0000','#FF00FF','#00FF00','#00FFFF','#FFFF00'];
  78.         var n = cs = parseInt(Math.random() * colors.length / 2);
  79.         var cc = parseInt(Math.random() * colors.length  / 2);
  80.         var colorMode = parseInt(Math.random() * 2);
  81.         var star = Math.round(Math.random()) == 1 ? "★" : "☆";
  82.         this.r = 10;
  83.         this.radius = Math.round(Math.random() * 30) + 60;
  84.         this.num = Math.round(Math.random() * 5 + 5) * 2;
  85.         this.angle = 180 / this.num * 2;
  86.         
  87.         for(var i=1; i<=this.num; i++){
  88.             this.stars[i] = document.createElement("div");
  89.             this.stars[i].innerHTML = star;
  90.             this.stars[i].className = "star";
  91.             if(colorMode == 1){
  92.                 this.stars[i].style.color = colors[n];
  93.                 if(++n > cs + cc)
  94.                     n = cs;
  95.             }else{
  96.                 this.stars[i].style.color = colors[parseInt(Math.random() * colors.length)];
  97.             }
  98.             this.sky.appendChild(this.stars[i]);
  99.         }
  100.     },
  101.     moveStars : function(){
  102.         var self = this;
  103.         if(this.r < this.radius){
  104.             var p = this.step2 - parseInt(this.r / this.radius * 5);
  105.             p = p < 1 ? 1 : p;
  106.             this.r += p;
  107.             p = parseInt(this.r / this.radius * 100);
  108.             for(var i=1; i<=this.num; i++){
  109.                 this.stars[i].style.left = this.x - Math.round(this.r * Math.sin(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
  110.                 this.stars[i].style.top = this.y - Math.round(this.r * Math.cos(Math.PI - (Math.PI / 180 * this.angle * i))) + "px";
  111.                 this.stars[i].style.fontSize = 4 + p/10 + "px";
  112.                 this.setOpacity(this.stars[i], p);
  113.             }
  114.             setTimeout(function(){self.moveStars();}, this.delay);
  115.         }else{
  116.             setTimeout(function(){self.hideStars();}, 200 * Math.random());
  117.         }
  118.     },
  119.     initBezier : function(){
  120.         var coeff_x = [];
  121.          var coeff_y = [];
  122.         
  123.         this.points = [];
  124.         this.t = 0;
  125.         this.delt = 1.0 / this.max;
  126.         this.cur = 1;
  127.         var a = parseInt(Math.random() * 5) * 90;
  128.         coeff_x[0] = this.x;
  129.         coeff_y[0] = this.y;
  130.         for(var i=1; i<=this.num; i++){
  131.             coeff_x[1] = this.x + Math.sin(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
  132.             coeff_y[1] = this.y + Math.cos(Math.PI - (Math.PI / 180 * this.angle * i)) * this.radius/2;
  133.             coeff_x[2] = this.x + Math.sin(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
  134.             coeff_y[2] = this.y + Math.cos(Math.PI - (Math.PI / 180 * (a-this.angle * i))) * this.radius;
  135.             this.points[(i-1)*2] = coeff_x.slice(0);
  136.             this.points[(i-1)*2+1] = coeff_y.slice(0);
  137.         }
  138.     },
  139.     moveStars2 : function(){
  140.         var self = this;
  141.         if(this.cur < this.max){
  142.             this.t += this.delt;
  143.             this.cur++;
  144.             p = parseInt(this.cur / this.max * 100);
  145.             for(var i=1; i<=this.num; i++){
  146.                 this.stars[i].style.left = this.getNextPoint(this.degree, this.points[(i-1)*2], this.t) + "px";
  147.                 this.stars[i].style.top = this.getNextPoint(this.degree, this.points[(i-1)*2+1], this.t) + "px";
  148.                 this.stars[i].style.fontSize = 4 + p/10 + "px";
  149.                 this.setOpacity(this.stars[i], p);
  150.             }
  151.             setTimeout(function(){self.moveStars2();}, this.delay);
  152.         }else{
  153.             setTimeout(function(){self.hideStars();}, 200 * Math.random());
  154.         }
  155.     },
  156.     hideStars : function(){
  157.         for(var i=1; i<=this.num; i++){
  158.             this.sky.removeChild(this.stars[i]);
  159.             this.stars[i] = null;
  160.             if(this.points != null){
  161.                 delete this.points[(i-1)*2];
  162.                 delete this.points[(i-1)*2+1];
  163.             }
  164.         }
  165.         if(this.points){
  166.             delete this.points;
  167.         }
  168.         this.points = null;
  169.         if(this.loop){
  170.             this.play();
  171.         }
  172.     },
  173.     fire : function(){
  174.         this.hideBall();
  175.         this.showStars();
  176.         
  177.         var effect = parseInt(Math.random() * 2) + 1;
  178.         switch(effect){
  179.             case 1:
  180.                 this.moveStars();
  181.                 break;
  182.             case 2:
  183.                 this.initBezier();
  184.                 this.moveStars2();
  185.                 break;
  186.         }
  187.     },
  188.     play : function(){
  189.         this.init();
  190.         this.showBall();
  191.         this.moveBall();
  192.     }
  193. };
  194. document.ready = function(){
  195.     for(var i=0; i<5; i++)
  196.         new Fireworks(document.body, true).play();
  197. };
  198. </script>
複製代碼
1

評分人數

看帖回帖那是一定要的:
  喜!我終於占一了;坐到沙發!

TOP

感謝分享WWW~
秀妍最棒了!

TOP

谢谢大大~!也祝大大新年快乐~!

TOP

本帖最後由 繽紛色彩 於 2016-1-16 22:25 編輯

代碼擺放好了
看不到有烟花出現

=========
已看到了
一直在頁頂等
原來是從頁底發放上來
效果不錯

TOP

奇怪!为什么我的不显示?难道不兼容x3.2的!

TOP

回復 6# 我來自他郷


    你放在广告位试试

TOP

回復 7# 无界

ok!谢谢,我再试试,没想到我要找的东西都是你的作品啊!呵呵

TOP

不行!我不过你的提醒让我想到把小人加到广告位,我只选择注册和论坛,这样他就不会出现在板块,不会阻碍发帖和玩游戏了。。。呵呵

TOP

刚刚看到烟花出现在板块,但论坛却没有,有可能我安装的东西太多的关系。。。再次谢谢!

TOP

返回列表