javascript实现下雪效果

原理:

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

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

3、好像不够完善勿喷

效果预览:http://wjf444128852.github.io/demo02/snow/index.html

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪花飞舞</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/move.js"></script>
</head>
<body>
    <div class="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: 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);
}

 

posted @ 2016-04-24 18:08  逗伴不是瓣  阅读(4862)  评论(1)  编辑  收藏  举报