下雪了，這篇文章主要介紹了javascript實現雪花飛舞，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了雪花飛舞效果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);
}
以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
