让你的博客飘雪花超出屏幕依然看得见

  前些天,在园子里看到了使你的博客飘雪花的文章,就赶紧弄到自己的博客里来看看效果,别说,还真是漂亮啊。可是看了一会,就发现页面变得特别卡。

  看了下代码后发现,原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除。

  但是,实际上,超出屏幕的页面我们又看不见,就算有雪花在飘又有什么意义呢。

  于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位。

  将页面刷新下,果然好多了。现把修改代码贴出来与大家分享。

  PS.原作者链接我没找到,版权归原作者所有:)

  

复制代码 代码如下:

  (function($){

  $.fn.snow=function(options){

  var $flake=$('<div />')

  .css({

  'position':'fixed',//'absolute',

  'top':'-50px',

  'z-index':'1000'

  })

  .html('❄');

  var documentHeight=document.documentElement.clientHeight;//$(document).height();

  var documentWidth=$(document).width();

  var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"};

  var options=$.extend({},defaults,options);

  var interval=setInterval(function(){

  var startPositionLeft=Math.random()*documentWidth-100;

  var startOpacity=0.5+Math.random();

  var sizeFlake=options.minSize+Math.random()*options.maxSize;

  var endPositionTop=documentHeight-40;

  var endPositionLeft=startPositionLeft-100+Math.random()*200;

  var 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);//interval End

  };//$.fn.snow End

  })(jQuery);

  $.fn.snow({ minSize: 10, maxSize: 60, newOn: 800, flakeColor: '#ccc'});