三款已久的雪花特效

一、下雪特效代码①

startOpacity = 0.5 + Math.random(),  
     sizeFlake = options.minSize + Math.random() * options.maxSize,  
     endPositionTop = documentHeight - 200,  
     endPositionLeft = startPositionLeft - 500 + Math.random() * 500,  
     durationFall = documentHeight * 10 + Math.random() * 5000;  
     $flake.clone().appendTo('body').css({  
         left: startPositionLeft,  
         opacity: startOpacity,  
         'font-size': sizeFlake,  
         color: options.flakeColor  
     }).animate({  
         top: endPositionTop,  
        left: endPositionLeft,  
         opacity: 0.2  
     },durationFall,'linear',function(){  
        $(this).remove()  
     });  
     }, options.newOn);  
     };  
 })(jQuery);  
 $(function(){  
     $.fn.snow({   
         minSize: 5, /* 定义雪花最小尺寸 */  
       maxSize: 50,/* 定义雪花最大尺寸 */  
         newOn: 300  /* 定义密集程度，数字越小越密集 */  
    });  
 });  
</script> 

二、下雪特效代码②

};
      /* 飞出边界-放置最顶端继续坠落 */
      flakeMove.prototype.reset = function(width, height) {
          this.x = Math.floor(Math.random() * width);
          this.y = 0;
          this.size = Math.random() * this.maxSize + 2;
          this.speed = Math.random() * 1 + this.fallSpeed;
          this.velY = this.speed;
          this.velX = 0;
      };
      // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
      flakeMove.prototype.render = function(ctx) {
          var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
          snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
          snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
          snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
          ctx.save();
          ctx.fillStyle = snowFlake;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fill();
          ctx.restore();
     };
     /* 创建雪花-定义形状 */
     function createFlakes() {
         var maxFlake = this.maxFlake,
             flakes = this.flakes = [],
             canvas = this.canvas;
         for (var i = 0; i < maxFlake; i++) {
             flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
         }
     }
     /* 画雪 */
     function drawSnow() {
         var maxFlake = this.maxFlake,
             flakes = this.flakes;
         ctx = this.ctx, canvas = this.canvas, that = this;
         /* 清空雪花 */
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         for (var e = 0; e < maxFlake; e++) {
             flakes[e].update();
             flakes[e].render(ctx);
         }
         /*  一帧一帧的画 */
         this.loop = requestAnimationFrame(function() {
             drawSnow.apply(that);
         });
     }
     /* 调用及控制方法 */
     var snow = new snowFall({maxFlake:60});
     snow.start();
 </script>
 

三、下雪特效代码③

<script type="text/javascript">
       window.onload = function () {
                    var minSize = 5; //最小字体
                    var maxSize = 50;//最大字体
                    var newOne = 100; //生成雪花间隔
                    var flakColor = "#fff"; //雪花颜色
                    var flak = $("<div></div>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花
                    var dhight = $(window).height(); //定义视图高度
                    var dw =$(window).width()-80; //定义视图宽度
                    setInterval(function(){
                    var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
                    var startLeft = Math.random()*dw; //雪花生成是随机的left值
                    var startOpacity = 0.7+Math.random()*0.3; //随机透明度
                    var endTop= dhight-100; //雪花停止top的位置
                    var endLeft= Math.random()*dw; //雪花停止的left位置
                    var durationfull = 5000+Math.random()*5000; //雪花飘落速度不同
                    flak.clone().appendTo($("body")).css({
                    "left":startLeft ,
                    "opacity":startOpacity,
                    "font-size":sizeflak,
                    "color":flakColor
                    }).animate({
                    "top":endTop,
                    "left":endLeft,
                    "apacity":0.1
                    },durationfull,function(){
                    $(this).remove()
                    });
                    },newOne);
                }
</script>

使用方法：

方法①、复制其中一种JS代码，粘贴到网站</body>标签之前即可；

方法②、去掉代码前后的<script **>标签，然后将代码保存为js文件，最后在网站引用即可。

方法③、直接在html页面中引用即可。

Ps：若没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可。

载入jquery

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
2 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

感谢您的来访，获取更多精彩文章请收藏本站。