javascript实现下雪效果【实例代码】
原理:
1、js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果。
2、js获取创建的DIV并改变其top属性值，当下落的高度大于屏幕高后删除该移动div
3、好像不够完善勿喷
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实现下雪效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。