三款已久的雪花特效

最新推荐文章于 2020-09-25 16:14:09 发布

qq_45670012

最新推荐文章于 2020-09-25 16:14:09 发布

阅读量747

点赞数

分类专栏：前端文章标签：博客园美化雪花特效

原文链接：https://www.mk2048.com/blog/blog.php?id=hahbbii1aaaa&title=%E4%B8%89%E6%AC%BE%E5%B7%B2%E4%B9%85%E7%9A%84%E9%9B%AA%E8%8A%B1%E7%89%B9%E6%95%88

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

一、下雪特效代码①

 1 <script type="text/javascript">  
 2 (function($){  
 3     $.fn.snow = function(options){  
 4     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),  
 5     documentHeight  = $(document).height(),  
 6     documentWidth   = $(document).width(),  
 7     defaults = {  
 8         minSize     : 10,  
 9         maxSize     : 20,  
10         newOn       : 1000,  
11         flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */  
12     },  
13     options = $.extend({}, defaults, options);  
14     var interval= setInterval( function(){  
15     var startPositionLeft = Math.random() * documentWidth - 100,  
16     startOpacity = 0.5   Math.random(),  
17     sizeFlake = options.minSize   Math.random() * options.maxSize,  
18     endPositionTop = documentHeight - 200,  
19     endPositionLeft = startPositionLeft - 500   Math.random() * 500,  
20     durationFall = documentHeight * 10   Math.random() * 5000;  
21     $flake.clone().appendTo('body').css({  
22         left: startPositionLeft,  
23         opacity: startOpacity,  
24         'font-size': sizeFlake,  
25         color: options.flakeColor  
26     }).animate({  
27         top: endPositionTop,  
28         left: endPositionLeft,  
29         opacity: 0.2  
30     },durationFall,'linear',function(){  
31         $(this).remove()  
32     });  
33     }, options.newOn);  
34     };  
35 })(jQuery);  
36 $(function(){  
37     $.fn.snow({   
38         minSize: 5, /* 定义雪花最小尺寸 */  
39         maxSize: 50,/* 定义雪花最大尺寸 */  
40         newOn: 300  /* 定义密集程度，数字越小越密集 */  
41     });  
42 });  
43 </script>

二、下雪特效代码②

  1 <script type="text/javascript">
  2     /* 控制下雪 */
  3     function snowFall(snow) {
  4         /* 可配置属性 */
  5         snow = snow || {};
  6         this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
  7         this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
  8         this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
  9     }
 10     /* 兼容写法 */
 11     requestAnimationFrame = window.requestAnimationFrame ||
 12         window.mozRequestAnimationFrame ||
 13         window.webkitRequestAnimationFrame ||
 14         window.msRequestAnimationFrame ||
 15         window.oRequestAnimationFrame ||
 16         function(callback) { setTimeout(callback, 1000 / 60); };
 17 
 18     cancelAnimationFrame = window.cancelAnimationFrame ||
 19         window.mozCancelAnimationFrame ||
 20         window.webkitCancelAnimationFrame ||
 21         window.msCancelAnimationFrame ||
 22         window.oCancelAnimationFrame;
 23     /* 开始下雪 */
 24     snowFall.prototype.start = function(){
 25         /* 创建画布 */
 26         snowCanvas.apply(this);
 27         /* 创建雪花形状 */
 28         createFlakes.apply(this);
 29         /* 画雪 */
 30         drawSnow.apply(this)
 31     }
 32     /* 创建画布 */
 33     function snowCanvas() {
 34         /* 添加Dom结点 */
 35         var snowcanvas = document.createElement("canvas");
 36         snowcanvas.id = "snowfall";
 37         snowcanvas.width = window.innerWidth;
 38         snowcanvas.height = document.body.clientHeight;
 39         snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
 40         document.getElementsByTagName("body")[0].appendChild(snowcanvas);
 41         this.canvas = snowcanvas;
 42         this.ctx = snowcanvas.getContext("2d");
 43         /* 窗口大小改变的处理 */
 44         window.onresize = function() {
 45             snowcanvas.width = window.innerWidth;
 46             /* snowcanvas.height = window.innerHeight */
 47         }
 48     }
 49     /* 雪运动对象 */
 50     function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
 51         this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
 52         this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
 53         this.size = Math.random() * flakeSize   2;          /* 形状 */
 54         this.maxSize = flakeSize;                           /* 最大形状 */
 55         this.speed = Math.random() * 1   fallSpeed;         /* 坠落速度 */
 56         this.fallSpeed = fallSpeed;                         /* 坠落速度 */
 57         this.velY = this.speed;                             /* Y方向速度 */
 58         this.velX = 0;                                      /* X方向速度 */
 59         this.stepSize = Math.random() / 30;                 /* 步长 */
 60         this.step = 0                                       /* 步数 */
 61     }
 62     flakeMove.prototype.update = function() {
 63         var x = this.x,
 64             y = this.y;
 65         /* 左右摆动(余弦) */
 66         this.velX *= 0.98;
 67         if (this.velY <= this.speed) {
 68             this.velY = this.speed
 69         }
 70         this.velX  = Math.cos(this.step  = .05) * this.stepSize;
 71 
 72         this.y  = this.velY;
 73         this.x  = this.velX;
 74         /* 飞出边界的处理 */
 75         if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
 76             this.reset(canvas.width, canvas.height)
 77         }
 78     };
 79     /* 飞出边界-放置最顶端继续坠落 */
 80     flakeMove.prototype.reset = function(width, height) {
 81         this.x = Math.floor(Math.random() * width);
 82         this.y = 0;
 83         this.size = Math.random() * this.maxSize   2;
 84         this.speed = Math.random() * 1   this.fallSpeed;
 85         this.velY = this.speed;
 86         this.velX = 0;
 87     };
 88     // 渲染雪花-随机形状（此处可修改雪花颜色！！！）
 89     flakeMove.prototype.render = function(ctx) {
 90         var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
 91         snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
 92         snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
 93         snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
 94         ctx.save();
 95         ctx.fillStyle = snowFlake;
 96         ctx.beginPath();
 97         ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
 98         ctx.fill();
 99         ctx.restore();
100     };
101     /* 创建雪花-定义形状 */
102     function createFlakes() {
103         var maxFlake = this.maxFlake,
104             flakes = this.flakes = [],
105             canvas = this.canvas;
106         for (var i = 0; i < maxFlake; i  ) {
107             flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
108         }
109     }
110     /* 画雪 */
111     function drawSnow() {
112         var maxFlake = this.maxFlake,
113             flakes = this.flakes;
114         ctx = this.ctx, canvas = this.canvas, that = this;
115         /* 清空雪花 */
116         ctx.clearRect(0, 0, canvas.width, canvas.height);
117         for (var e = 0; e < maxFlake; e  ) {
118             flakes[e].update();
119             flakes[e].render(ctx);
120         }
121         /*  一帧一帧的画 */
122         this.loop = requestAnimationFrame(function() {
123             drawSnow.apply(that);
124         });
125     }
126     /* 调用及控制方法 */
127     var snow = new snowFall({maxFlake:60});
128     snow.start();
129 </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

1 <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>