雪花特效代码3

china0396

1.   <script type="text/javascript">  
   
2. (function($){  
   
3.     $.fn.snow = function(options){  
   
4.      var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),  
   
5.      documentHeight  = $(document).height(),  
   
6.      documentWidth   = $(document).width(),  
   
7.      defaults = {  
   
8.          minSize     : 10,  
   
9.          maxSize     : 20,  
   
10.          newOn       : 1000,  
    
11.          flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */  
    
12.      },  
    
13.      options = $.extend({}, defaults, options);  
    
14.      var interval= setInterval( function(){  
    
15.      var startPositionLeft = Math.random() * documentWidth - 100,  
    
16.      startOpacity = 0.5 + Math.random(),  
    
17.      sizeFlake = options.minSize + Math.random() * options.maxSize,  
    
18.      endPositionTop = documentHeight - 200,  
    
19.      endPositionLeft = startPositionLeft - 500 + Math.random() * 500,  
    
20.      durationFall = documentHeight * 10 + Math.random() * 5000;  
    
21.      $flake.clone().appendTo('body').css({  
    
22.          left: startPositionLeft,  
    
23.          opacity: startOpacity,  
    
24.          'font-size': sizeFlake,  
    
25.          color: options.flakeColor  
    
26.      }).animate({  
    
27.          top: endPositionTop,  
    
28.         left: endPositionLeft,  
    
29.          opacity: 0.2  
    
30.      },durationFall,'linear',function(){  
    
31.         $(this).remove()  
    
32.      });  
    
33.      }, options.newOn);  
    
34.      };  
    
35. })(jQuery);  
    
36. $(function(){  
    
37.      $.fn.snow({   
    
38.          minSize: 5, /* 定义雪花最小尺寸 */  
    
39.        maxSize: 50,/* 定义雪花最大尺寸 */  
    
40.          newOn: 300  /* 定义密集程度，数字越小越密集 */  
    
41.     });  
    
42. });  
    
43. </script>
    

复制代码