下面小编就为大家带来一篇javascript实现下雪效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考

原理 :

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

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

3、好像不够完善勿喷

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: 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代码:

/*

creatBy jiucheng 2016-4-24

*/

window.onload=function(){

init();

}

// 创建DIV

function creatDiv(){

// 创建DIV并追加到父元素

var snowDiv=document.createElement("div");

document.getElementById("js_sonw").appendChild(snowDiv);

// 让创建DIV的class为随机，显示不同的雪花

var whatName=["snow_one parent","snow_two parent","snow_three parent","snow_four parent"];

var index=Math.floor(Math.random()*whatName.length);

snowDiv.className=whatName[index];

// 获取该DIV的left属性值(随机的)并赋值给创建的DIV

var whatLeft=getLeft()+'px';

snowDiv.style.left=whatLeft;

return snowDiv;

}

// 获取随机left属性值

function getLeft(){

// 获取该DIV的最大left属性值即父元素的宽度

var eleParent=document.getElementById("js_sonw");

// 获取父元素的所有style样式

var style=window.getComputedStyle(eleParent);

// CSS中的left是负数这里得减去下

var maxWidth=parseInt(style.width)+70;

// 让创建的DIV的left为随机值

var randomLeft=Math.floor(Math.random()*maxWidth);

return randomLeft;

}

// 让其向下移动

function moveDown(){

// 获取移动对象

var moveElem=creatDiv();

// 获取移动对象的所有style属性值

var eleStyle=window.getComputedStyle(moveElem);

// 获取它的top属性值

var eleTop=parseInt(eleStyle.top);

// 设置定时器动态改变移动对象的top属性值

var t=setInterval(function(){

eleTop++;

// 把新的top值付给移动对象

moveElem.style.top=eleTop+"px";

// 当下落到屏幕的高度后停止定时器并把该移动对象从父元素删除

if(eleTop>=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实现下雪效果【实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考