1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 *{17 margin:0px;18 padding:0px;19 }20 body{21 background-color:#000;22 overflow:hidden;23 }24 25 26 /// 27 var minSize = 5;//雪花最小尺寸28 var maxSize = 50;//雪花最大尺寸29 var newOn = 400;//每隔0.4秒就产生一个雪花30 var flakeColor = "#fff";//雪花颜色31 var $flake = $(" ").css("position", "absolute").html("❄");//命名一个对象用$符号开头,此处命名一个div,内容为雪花32 //var $flake = $(" ").css("position", "absolute").html('');33 $(function () {34 var documentWidth = $(document).width();//获取文档宽度35 var documentHight = $(document).height();//获取文档高度36 setInterval(function () {37 var startPositionLeft = Math.random() * documentWidth;//产生雪花一开始的随机的left38 var startOpacity = 0.7 + Math.random() * 0.3;//产生雪片一开始的透明度39 var endOpacity = 0.4 + Math.random() * 0.3;//产生雪片结束的透明度40 var endPositionLeft = Math.random() * documentWidth;//产生雪片下落后的随机的left41 var durationFall = documentHight * 10 + Math.random() * 3000;//产生一个雪片下落的随机的时间42 var sizeFlake = minSize + Math.random() * maxSize;//产生随机大小的雪片43 $flake.clone().appendTo("body").css({44 "left": startPositionLeft,45 "opacity": startOpacity,46 "font-size": sizeFlake,47 "color": flakeColor,48 "top":"-55px"49 }).animate({50 "top": documentHight,51 "left": endPositionLeft,52 "opacity":endOpacity53 }, durationFall, function () {54 $(this).remove();55 });56 }, newOn);57 });
主要使用setInterval与animate结合使用