给网页添加js代码网站添加添加雪花飘落效果

今天发现在某个网站发现一个非常有意思的事情。就是把网页会显示雪花飘落效果。感觉非常有意思，去网上找了下资料，发现实现的方法非常有意思而且很简单。下面就说下怎么实现网页雪花飘落效果。

其实就是一段JS代码实现的。只需要把下面的JS代码添加到需要显示雪花飘落效果的网页里即可。

<script>(function($){
  $.fn.snow = function(options){
  var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  documentHeight     = $(document).height(),
  documentWidth  = $(document).width(),
  defaults = {
     minSize   : 10,
     maxSize   : 20,
     newOn     : 1000,
     flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
  },
  options = $.extend({}, defaults, options);
  var interval= setInterval( function(){
  var startPositionLeft = Math.random() * documentWidth - 100,
  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>

点击链接加入群聊三群：751529538

点击链接加入群聊二群：376877156

点击链接加入群聊【路由器交流群：622891808已满】

本站附件分享，如果附件失效，可以去找找看

诚通网盘附件、百度网盘附件

饿了么红包