javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】

更新時(shí)間：2016年05月03日 17:16:00 投稿：jingxian

下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

原理 :

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

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

3、好像不夠完善勿噴

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為隨機(jī)，顯示不同的雪花
  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屬性值(隨機(jī)的)并賦值給創(chuàng)建的DIV
  var whatLeft=getLeft()+'px';
  snowDiv.style.left=whatLeft;
  return snowDiv;
}
// 獲取隨機(jī)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為隨機(jī)值
  var randomLeft=Math.floor(Math.random()*maxWidth);
  return randomLeft;
}
// 讓其向下移動(dòng)
function moveDown(){
  // 獲取移動(dòng)對(duì)象
  var moveElem=creatDiv();
  // 獲取移動(dòng)對(duì)象的所有style屬性值
  var eleStyle=window.getComputedStyle(moveElem);
  // 獲取它的top屬性值
  var eleTop=parseInt(eleStyle.top);
  // 設(shè)置定時(shí)器動(dòng)態(tài)改變移動(dòng)對(duì)象的top屬性值
  var t=setInterval(function(){
    eleTop++;
    // 把新的top值付給移動(dòng)對(duì)象
    moveElem.style.top=eleTop+"px";
    // 當(dāng)下落到屏幕的高度后停止定時(shí)器并把該移動(dòng)對(duì)象從父元素刪除
    if(eleTop>=window.innerHeight){    
      clearInterval(t);
      document.getElementById("js_sonw").removeChild(moveElem);
    }    
  },10);//下落速度沒(méi)10毫秒下落1px
}
function init(){
  // 動(dòng)態(tài)獲取并設(shè)置body的高度
  document.body.style.height=window.innerHeight+"px";
  // 每500毫秒創(chuàng)建一個(gè)移動(dòng)對(duì)象并執(zhí)行移動(dòng)函數(shù)
  var t=setInterval(function(){
    moveDown();
  },100);
}

以上這篇javascript實(shí)現(xiàn)下雪效果【實(shí)例代碼】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: