首页 > 代码库 > 飘雪效果

飘雪效果

2024-11-15 12:20:01   202人阅读

技术分享 
 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="http://www.mamicode.com/css/demo.css" rel="stylesheet" />
 7     <script src="http://www.mamicode.com/js/jquery-1.10.2.min.js"></script>
 8     <script src="http://www.mamicode.com/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="http://www.mamicode.com/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 });
View Code

主要使用setInterval与animate结合使用

飘雪效果


联系
我们