基于jquery雪花飘落代码 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>Snow</title>
 7 </head>
 8 <body>
 9     <div id="app"></div>
10 </body>
11 <script src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>
12 <script>
13 (function($) {
14     $.fn.snow = function(options) {
15         var area  = {width:$(document).width(), height: $(document).height()},
16             options = $.extend({}, {
17                 elem    : $('<div style="font-family:\'Segoe UI Symbol\';">&#10052;</div>').css({'position': 'absolute', 'top': '-50px'}),
18                 minSize : 10,
19                 maxSize : 20,
20                 color   : "white",
21                 newOn   : 2000,
22                 drift   : 100
23             }, options);
24 
25         setInterval(function() {
26             var size     = options.minSize + Math.random() * (options.maxSize - options.minSize),
27                 $elem    = options.elem.clone().css({'font-size' : size}).appendTo('body'),
28                 left     = (area.width - $elem.width()) * Math.random(),
29                 opacity  = 0.5 + Math.random(),
30                 endTop   = area.height - $elem.height() - 1,
31                 endLeft  = left + (Math.random() - 0.5) * options.drift * 2,
32                 duration = area.height * 10 + Math.random() * 5000;
33 
34             if(endLeft < 0){
35                 endLeft = 0;
36             } else if(endLeft > area.width - $elem.width()){
37                 endLeft = area.width - $elem.width();
38             }
39 
40             $elem.css({
41                 left: left, top:0 - $elem.height(), opacity: opacity, color: options.color
42             }).animate({top: endTop, left: endLeft, opacity: 0.2}, duration, 'linear', function() {
43                 $(this).remove();
44             });
45         }, options.newOn);
46     };
47 })(jQuery);
48 
49 $.fn.snow({
50     minSize: 5,
51     maxSize: 50,
52     newOn: 100
53 });
54 </script>
55 </html>

 

posted on 2018-09-18 17:22  Jacky Yu  阅读(227)  评论(0)    收藏  举报