下雪了 javascript实现雪花飞舞

本文实例为大家分享了雪花飞舞效果javascript实现，供大家参考，具体内容如下

原理:

1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。

2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div

3、好像不够完善勿喷

效果预览:nofollow" target="_blank" href="http://wjf444128852.github.io/demo02/sNow/index.html">http://wjf444128852.github.io/demo02/sNow/index.html

HTML代码：

rush:xhtml;"> <Meta charset="UTF-8">

Now_parent" id="js_sonw">

CSS代码

rush:css;"> *{ margin:0; padding:0; list-style: none; border: none; } body{ width: 100%; height:600px; background:#000; } .sNow_parent{ position: relative; width: 100%; height:100%; overflow: hidden; margin: 0 auto; } .sNow_parent div.parent{ background-image: url(../img/sNow.png); float: left; -webkit-transform: scale(.1); -moz-transform: scale(.1); -o-transform: scale(.1); -ms-transform: scale(.1); transform: scale(.1); position: absolute; } .sNow_one{ width: 180px; height: 180px; background-position:0 0; background-repeat: no-repeat; left:-70px; top: -95px; } .sNow_two{ width: 140px; height: 140px; background-position:-220px -18px; left:-30px; top: -75px; } .sNow_three{ width:150px; height: 150px; background-position:-400px -15px; left:-20px; top: -80px; } .sNow_four{ width: 160px; height: 160px; background-position:-10px -206px; } .sNow_four{ left:-10px; top: -85px; }

JS代码:

=window.innerHeight){ clearInterval(t); document.getElementById("js_sonw").removeChild(moveElem); } },10);//下落速度没10毫秒下落1px } function init(){ // 动态获取并设置body的高度 document.body.style.height=window.innerHeight+"px"; // 每500毫秒创建一个移动对象并执行移动函数 var t=setInterval(function(){ moveDown(); },100); }

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。