javascript实现下雪效果

时间：2023-12-30 09:22:20

原理:

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:;

    padding:;

    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);

}

相关文章