下雪了 javascript实现雪花飞舞
本文实例为大家分享了雪花飞舞效果javascript实现，供大家参考，具体内容如下
原理:
1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。
2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div
3、好像不够完善勿喷
效果预览:http://wjf444128852.github.io/demo02/snow/index.html
HTML代码：
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>雪花飞舞</title> <linkrel="stylesheet"href="css/index.css"> <scriptsrc="js/move.js"></script> </head> <body> <divclass="snow_parent"id="js_sonw"> </div> </body> </html>
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:0auto;
}
.snow_parentdiv.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:00;
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代码:
/*
creatByjiucheng2016-4-24
*/
window.onload=function(){
init();
}
//创建DIV
functioncreatDiv(){
//创建DIV并追加到父元素
varsnowDiv=document.createElement("div");
document.getElementById("js_sonw").appendChild(snowDiv);
//让创建DIV的class为随机，显示不同的雪花
varwhatName=["snow_oneparent","snow_twoparent","snow_threeparent","snow_fourparent"];
varindex=Math.floor(Math.random()*whatName.length);
snowDiv.className=whatName[index];
//获取该DIV的left属性值(随机的)并赋值给创建的DIV
varwhatLeft=getLeft()+'px';
snowDiv.style.left=whatLeft;
returnsnowDiv;
}
//获取随机left属性值
functiongetLeft(){
//获取该DIV的最大left属性值即父元素的宽度
vareleParent=document.getElementById("js_sonw");
//获取父元素的所有style样式
varstyle=window.getComputedStyle(eleParent);
//CSS中的left是负数这里得减去下
varmaxWidth=parseInt(style.width)+70;
//让创建的DIV的left为随机值
varrandomLeft=Math.floor(Math.random()*maxWidth);
returnrandomLeft;
}
//让其向下移动
functionmoveDown(){
//获取移动对象
varmoveElem=creatDiv();
//获取移动对象的所有style属性值
vareleStyle=window.getComputedStyle(moveElem);
//获取它的top属性值
vareleTop=parseInt(eleStyle.top);
//设置定时器动态改变移动对象的top属性值
vart=setInterval(function(){
eleTop++;
//把新的top值付给移动对象
moveElem.style.top=eleTop+"px";
//当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除
if(eleTop>=window.innerHeight){
clearInterval(t);
document.getElementById("js_sonw").removeChild(moveElem);
}
},10);//下落速度没10毫秒下落1px
}
functioninit(){
//动态获取并设置body的高度
document.body.style.height=window.innerHeight+"px";
//每500毫秒创建一个移动对象并执行移动函数
vart=setInterval(function(){
moveDown();
},100);
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。