<!Doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: url(img/pic10.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
.snowLand {
position: absolute;
left: 0;
bottom: 0;
background: white;
width: 100%;
height: 0;
}
</style>
</head>
<body>
<div class="snowLand"></div>
<script>
var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;
var screenH = document.documentElement.offsetHeight || document.body.offsetHeight;
var oBody = document.getElementsByTagName('body')[0];
var oSnowLand = document.getElementsByClassName('snowLand')[0];
var snowLandH = 0;
var snowNum = 0;
function getRan(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Snow(size, l, t, deg, lastTime) {
this.size = size;
this.l = l;
this.t = t;
this.deg = deg;
this.lastTime = lastTime;
}
Snow.prototype.createSnow = function () {
var _this = this;
this.oImg = document.createElement('img');
this.oImg.src = "img/snowflake.png";
this.oImg.style.cssText = 'width:' + this.size + 'px;height:' + this.size + 'px;position:absolute;left:' + this.l + 'px;top:' + (-this.size) + 'px;transform:rotate(0deg);transition:all ' + this.lastTime + 's ease-in;';
oBody.appendChild(this.oImg);
setTimeout(function () {
_this.snowFall(_this);
}, 100);//這裏延時若是加的不夠，就可能出現cssText還沒完全加載進去就執行snowfall，於是可能就不會執行transition事件的監聽，就會出現圖片一直停留在屏幕中的問題
}
Snow.prototype.snowFall = function (_this) {
_this.oImg.style.top = _this.t + 'px';
_this.oImg.style.transform = 'rotate(' + _this.deg + 'deg)';
//因爲完成transition的屬性有兩個，所以不加控制的話會執行兩次 oBody.removeChild(_this.oDiv);
_this.flag = true;
_this.oImg.addEventListener('transitionend', function () {
if (_this.flag == true) {
oBody.removeChild(_this.oImg);
_this.flag = false;
//每10個雪花，升高10px
//console.log(sonwLandH)
if (snowLandH <= 100) {
snowNum++;
snowLandH = parseInt(snowNum / 10) * 10;
oSnowLand.style.height = snowLandH + 'px';
}
}
}, false)
}
setInterval(function () {
for (var i = 0; i < 6; i++) {
var nowSize = getRan(10, 30);
var snow = new Snow(nowSize, getRan(0, screenW - nowSize), screenH + nowSize, getRan(360, 1440), getRan(3, 6));
snow.createSnow();
}
}, 1000);
</script>
</body>
</html>