js实现下雪情景

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js实现下雪情景</title>
 6     <style>
 7         body{
 8             background-color: blue;
 9         }
10         img{
11             position: absolute;
12             width: 20px;
13             height: 20px;
14         }
15     </style>
16 
17     <script>
18         window.onload = function () {
19 
20             setInterval(function () {
21                 //随机产生一个雪花
22                 var img = document.createElement("img");
23                 var src = document.createAttribute("src");
24                 src.value = "image/flake.png";
25                 img.setAttributeNode(src);
26                 document.body.appendChild(img);
27                 var left = parseInt(Math.random()*window.innerWidth);
28                 img.style.left = left+"px";
29                 img.style.top = "0px";
30 
31                 //让雪花往下掉
32                 var timer = setInterval(function () {
33                     var currentTop = parseInt(getStyle(img,"top"));
34                     currentTop = currentTop + 1;
35                     if(currentTop > window.innerHeight-20){
36                         currentTop = window.innerHeight - 20;
37                         img.style.top = currentTop+"px";
38                         clearInterval(timer);
39                     }
40                     img.style.top = currentTop+"px";
41                 },10);
42             },500);
43 
44         }
45 
46         //获取style样式的css属性,考虑兼容;ie,火狐/谷歌;
47         function getStyle(parm1,parm2) {
48             return parm1.currentStyle ? parm1.currentStyle[parm2] : getComputedStyle(parm1)[parm2];  //parm1,要改变的元素代替名;parm2,要改变的属性名
49         }
50     </script>
51 </head>
52 <body>
53 
54 </body>
55 </html>

 

posted @ 2017-08-21 13:59  宋发元  阅读(322)  评论(0)    收藏  举报