閱讀51 返回首頁    go 汽車大全

JS實現下雪效果

原理:

1、js動態創建DIV,指定CLASS類設置不同的背景圖樣式顯示不同的雪花效果。

2、js獲取創建的DIV並改變其top屬性值，當下落的高度大於屏幕高後刪除該移動div

3、好像不夠完善勿噴

效果預覽:https://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);
}

最後更新：2017-11-05 12:04:51

  上一篇：go  CSS3的自定義動畫幀
  下一篇：go  vueJS簡單的點擊顯示與隱藏的效果