原作者是在body中不停的插入多个小div雪花来向下慢慢飘,一直飘到body的底部后,将雪花移除,于是,将原来的代码稍加修改,让他只是从屏幕的顶部飘落到屏幕底部(不是body的底部)后,就将雪花移除,另外将雪花改为fixed定位.
效果演示:点击这里
1 <p> 2 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 3 <script charset="utf-8" type="text/javascript">// <![CDATA[ 4 (function($){ 5 6 $.fn.snow = function(options){ 7 8 var $flake = $('<div id="snowbox" />').css({ 'position': 'fixed', 'top': '-50px', 'border-radius': '8px','background':'#fff'}), 9 documentHeight = $(document).height(), 10 documentWidth = $(document).width(), 11 defaults = { 12 minSize : 1, //雪花的最小尺寸 13 maxSize : 10, //雪花的最大尺寸 14 newOn : 100, //雪花出现的频率 15 flakeColor : "#FFFFFF" 16 }, 17 options = $.extend({}, defaults, options); 18 19 var interval = setInterval( function(){ 20 var startPositionLeft = Math.random() * documentWidth - 100, 21 startOpacity = 0.5 + Math.random(), 22 sizeFlake = options.minSize + Math.random() * options.maxSize, 23 endPositionTop = documentHeight - 40, 24 endPositionLeft = startPositionLeft - 100 + Math.random() * 500, 25 durationFall = documentHeight * 10 + Math.random() * 5000; 26 $flake.clone().appendTo('body').css({ 27 left: startPositionLeft, 28 opacity: startOpacity, 29 height: sizeFlake, 30 sizeFlake, 31 color: options.flakeColor 32 }).animate({ 33 top: endPositionTop, 34 left: endPositionLeft, 35 opacity: 0.2 36 },durationFall,'linear',function(){ 37 $(this).remove() 38 } 39 ); 40 41 }, options.newOn); 42 43 }; 44 45 })(jQuery); 46 // ]]></script> 47 </p> 48 <!--下面是调用方法和参数说明--> 49 <p> 50 <script type="text/javascript">// <![CDATA[ 51 $(function(){ 52 $.fn.snow({ 53 minSize: 1, //雪花的最小尺寸 54 maxSize:8, //雪花的最大尺寸 55 newOn: 100 //雪花出现的频率 这个数值越小雪花越多 56 }); 57 }); 58 // ]]></script> 59 </p>