JavaScript飞雪特效

马上就要到了传统节日“春节”? 网站添加了飞雪❄️特效

从网上找了源代码你可以复制到自己的网站或者博客体验一波

1
<script>
2
(function($){
3
  $.fn.snow = function(options){
4
  var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
5
  documentHeight   = $(document).height(),
6
  documentWidth  = $(document).width(),
7
  defaults = {
8
    minSize    : 6,
9
    maxSize    : 10,
10
    newOn    : 1000,
11
    flakeColor  : "#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: 20,/* 定义雪花最大尺寸 */
40
      newOn: 800  /* 定义密集程度，数字越小越密集 */
41
    });
42
});
43
</script>