卡通式圣诞节雪花飘落jquery下雪插件

jquery-snow是一款卡通式圣诞节雪花飘落jquery下雪插件。jquery-snow插件可以在页面或指定元素上生成雪花飘落效果。雪花元素可以是字体图标或图片，通过配置你还可以设置雪花的大小和飘落速度等，非常方便。

使用方法

在页面中引入jquery和jquery-snow.js文件，以及font-awesome字体图标文件。

<link href="css/font-awesome.min.css" rel="stylesheet">                 
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ckLine.min.js"></script>
                

HTML结构

不需要特别指定任何HTML结构，通过插件的target参数，你可以指定雪花是在页面的body还是其它指定元素中生成。

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该卡通式圣诞节雪花飘落jquery插件。

var snowEffectInterval = jQuery.fn.snow({
  // min size of element (default: 20)
  minSize: 10,
  
  // max size of element (default: 50)
  maxSize: 50,
  
  // flake fall time multiplier (default: 20)
  fallTimeMultiplier: 20, 
  
  // flake fall time difference (default: 10000)
  fallTimeDifference: 10000, 
  
  // interval (miliseconds) between new element spawns (default: 500)
  spawnInterval: 500, 
  
  // jQuery element to apply snow effect on (should work on any block element) (default: body)
  target: jQuery("body"),
  
  //elements to use in generating snow effect
  elements  : [
  
    // Element #1
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
    
    // Element #2
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-bell-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ed9b40'
    },
    
    // Element #3
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
    
    // Element #4
    {
      // html element to be spawned for this element
      html: '<i class="fa fa-music" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#cc2037'
    },
    
    // Element #5
    { 
      // html element to be spawned for this element
      html: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>',
      // hex color for this element - works only for font based icons
      color: '#ffffff'
    },
  ]
});
                

配置参数

该卡通式圣诞节雪花飘落jquery下雪插件的可用配置参数如下：

• minSize：雪花元素的最小尺寸。默认值为：10。
• maxSize：雪花元素的最小尺寸。默认值为：20。
• fallTimeMultiplier：雪花降落时间的乘数因子。默认值为：20。
• fallTimeDifference：雪花降落时间的差异因子。默认值为：10000。
• spawnInterval：新元素产生的时间间隔。默认值为：500毫秒。
• target：指定产生雪花的目标元素。默认值为：body。
• elements：用于产生雪花效果的一组HTML元素。

该卡通式圣诞节雪花飘落jquery下雪插件的github地址为：https://github.com/VladErc/jquery-snow