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结合使用