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\';">❄</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>
