通告 本站已支持IPV6访问(原爱搜网爱搜啊博客aisoa.cn

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

2019-05-05
0评论
/
阅读
爱搜啊

雪花飘落效果

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

其实就是一段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>


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

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


饿了么红包

饿了么红包

标签: js
于2019-05-05发布