首页>网站建设>给网页添加js代码网站添加添加雪花飘落效果
2019
05-05

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

路由器刷机交流Q群

雪花飘落效果

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

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

免费支持本站

支付宝打赏支付宝打赏微信打赏微信打赏

本文》有 0 条评论

留下一个回复 (您的评论需要经过审核才能显示)