1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" /> 7 <script src="js/jquery-1.10.2.min.js"></script> 8 <script src="js/demo.js"></script> 9 </head> 10 <body> 11 12 </body> 13 </html> 14 15 16 *{ 17 margin:0px; 18 padding:0px; 19 } 20 body{ 21 background-color:#000; 22 overflow:hidden; 23 } 24 25 26 /// <reference path="jquery-1.10.2.min.js" /> 27 var minSize = 5;//雪花最小尺寸 28 var maxSize = 50;//雪花最大尺寸 29 var newOn = 400;//每隔0.4秒就产生一个雪花 30 var flakeColor = "#fff";//雪花颜色 31 var $flake = $("<div></div>").css("position", "absolute").html("❄");//命名一个对象用$符号开头，此处命名一个div，内容为雪花 32 //var $flake = $("<div></div>").css("position", "absolute").html('<img src="image/11.jpg">'); 33 $(function () { 34 var documentWidth = $(document).width();//获取文档宽度 35 var documentHight = $(document).height();//获取文档高度 36 setInterval(function () { 37 var startPositionLeft = Math.random() * documentWidth;//产生雪花一开始的随机的left 38 var startOpacity = 0.7 + Math.random() * 0.3;//产生雪片一开始的透明度 39 var endOpacity = 0.4 + Math.random() * 0.3;//产生雪片结束的透明度 40 var endPositionLeft = Math.random() * documentWidth;//产生雪片下落后的随机的left 41 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":endOpacity 53 }, durationFall, function () { 54 $(this).remove(); 55 }); 56 }, newOn); 57 });
主要使用setInterval与animate结合使用