<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='common.css' />
<link rel="stylesheet" type="text/css" href="pageC.css">
</head>
<body>
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
<!-- 窗戶關閉 -->
<div class="window wood">
<div class="window-content" data-attr="red">
<div class="window-scene-bg"></div>
<div class="window-close-bg"></div>
<div class="window-left hover"></div>
<div class="window-right hover"></div>
</div>
</div>
</section>
<!-- 雪花 -->
<canvas id="snowflake"></canvas>
</section>
<script type="text/javascript">
var config = {};
//rem設置
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
//寬與高度
document.body.style.height = clientWidth * (900 / 1440) + "px"
config.clientWidth = clientWidth;
config.clientHeight = clientWidth * (900 / 1440)
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="snowflake.js"></script>
</body>
</html>
/**
* 雪花
* canvas版
*/
$(function() {
var snowElement = document.getElementById("snowflake")
var canvasContext = snowElement.getContext("2d");
var width = config.clientWidth;
var height = config.clientHeight;
//canvas尺寸修正
snowElement.width = width;
snowElement.height = height;
//構建雪球的數量
var snowNumber = 50;
/**
* 雪球類
*/
function Snow() {
this.radius = randomInRange(3, 10);
//初始的x位置
this.x = (Math.random() * width);
this.y = (Math.random() * height);
//濾鏡
this.alpha = randomInRange(0.5,1);
//繪制雪球
this.render();
}
/**
* 繪制雪球
* @param {[type]} canvasContext [description]
* @return {[type]} [description]
*/
Snow.prototype.render = function() {
//清除路徑
//開始一個畫布中的一條新路徑（或者子路徑的一個集合）
canvasContext.beginPath();
//用來填充路徑的當前的顏色，白色的雪球
canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
//一個中心點和半徑，為一個畫布的當前子路徑添加一條弧線
//坐標，圓，沿著圓指定弧的開始點和結束點的一個角度
//弧沿著圓周的逆時針方向（TRUE）還是順時針方向（FALSE）遍歷
canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
//關閉子路徑
canvasContext.closePath();
//fill() 方法使用 fillStyle 屬性所指定的顏色、漸變和模式來填充當前路徑
canvasContext.fill();
}
/**
* 隨機處理
* @param {[type]} min [description]
* @param {[type]} max [description]
* @return {[type]} [description]
*/
function randomInRange(min, max) {
var random = Math.random() * (max - min) + min;
return random;
}
//構建雪球
for (var i = 0; i < snowNumber; ++i) {
new Snow();
}
})
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
.page-c {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
position: absolute;
z-index: 30;
}
#snowflake{
position:absolute;
left:0;
top:0;
z-index: 999999;
}
