下雪了 javascript實現(xiàn)雪花飛舞

更新時間：2020年08月02日 10:40:12 作者：九成

下雪了，這篇文章主要介紹了javascript實現(xiàn)雪花飛舞，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了雪花飛舞效果javascript實現(xiàn)，供大家參考，具體內(nèi)容如下

原理:

1、js動態(tài)創(chuàng)建DIV,指定CLASS類設(shè)置不同的背景圖樣式顯示不同的雪花效果。

2、js獲取創(chuàng)建的DIV并改變其top屬性值，當(dāng)下落的高度大于屏幕高后刪除該移動div

3、好像不夠完善勿噴

效果預(yù)覽: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();
}
// 創(chuàng)建DIV
function creatDiv(){
 // 創(chuàng)建DIV并追加到父元素
 var snowDiv=document.createElement("div");
 document.getElementById("js_sonw").appendChild(snowDiv);
 // 讓創(chuàng)建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屬性值(隨機的)并賦值給創(chuàng)建的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是負(fù)數(shù)這里得減去下
 var maxWidth=parseInt(style.width)+70;
 // 讓創(chuàng)建的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);
 // 設(shè)置定時器動態(tài)改變移動對象的top屬性值
 var t=setInterval(function(){
 eleTop++;
 // 把新的top值付給移動對象
 moveElem.style.top=eleTop+"px";
 // 當(dāng)下落到屏幕的高度后停止定時器并把該移動對象從父元素刪除
 if(eleTop>=window.innerHeight){ 
  clearInterval(t);
  document.getElementById("js_sonw").removeChild(moveElem);
 } 
 },10);//下落速度沒10毫秒下落1px
}
function init(){
 // 動態(tài)獲取并設(shè)置body的高度
 document.body.style.height=window.innerHeight+"px";
 // 每500毫秒創(chuàng)建一個移動對象并執(zhí)行移動函數(shù)
 var t=setInterval(function(){
 moveDown();
 },100);
}

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: