卡通式圣诞节雪花飘落jquery下雪插件-HTML源码网

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

发布5年前浏览1162次上传者

ayumi

1.8 金币 VIP免费

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长(44784009#qq.com),将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

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'
    },
  ]
});