<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='common.css' />
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="observer.js"></script>
<script src="pageC.js"></script>
<script src="pageB.js"></script>
<script src="pageA.js"></script>
<script src="christmas.js"></script>
</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">
</section>
</section>
<button>點擊運行場景切換</button>
<script type="text/javascript">
/**
* 自適應頁面大小
* @param {[type]} doc [description]
* @param {[type]} win [description]
* @return {[type]} [description]
*/
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//自適應設置容器高度
var container = document.querySelector(".container")
//原始比例
var proportion = 900 / 1440;
container.style.height = container.clientWidth * proportion + "px";
};
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</body>
</html>
/**
* 慕課網特制
* 圣誕主題效果
* @type {Object}
*/
/**
* 切換頁面
* 模擬鏡頭效果
* @return {[type]} [description]
*/
function changePage(element, effect, callback) {
element
.addClass(effect)
.one("animationend webkitAnimationEnd", function() {
callback && callback();
})
}
/**
* 中間調用
*/
var Christmas = function() {
//頁面容器元素
var $pageA = $(".page-a");
var $pageB = $(".page-b");
var $pageC = $(".page-c");
//觀察者
var observer = new Observer();
//A場景頁面
new pageA(function() {
observer.publish("completeA");
})
//進入B場景
observer.subscribe("pageB", function() {
new pageB(function() {
observer.publish("completeB");
})
})
//進入C場景
observer.subscribe("pageC", function() {
new pageC()
})
//頁面A-B場景切換
observer.subscribe("completeA", function() {
changePage($pageA, "effect-out", function() {
observer.publish("pageB");
})
})
//頁面B-C場景切換
//?
};
$(function() {
$("button").click(function(){
//圣誕主題效果，開始
Christmas()
})
})
/**
* 事件
* 觀察者模式
*/
var Observer = (function(slice) {
function bind(event, fn) {
var events = this.events = this.events || {},
parts = event.split(/\s+/),
i = 0,
num = parts.length,
part;
if (events[event] && events[event].length) return this;
for (; i < num; i++) {
events[(part = parts[i])] = events[part] || [];
events[part].push(fn);
}
return this;
}
function one(event, fn) {
this.bind(event, function fnc() {
fn.apply(this, slice.call(arguments));
this.unbind(event, fnc);
});
return this;
}
function unbind(event, fn) {
var events = this.events,
eventName, i, parts, num;
if (!events) return;
parts = event.split(/\s+/);
for (i = 0, num = parts.length; i < num; i++) {
if ((eventName = parts[i]) in events !== false) {
events[eventName].splice(events[eventName].indexOf(fn), 1);
if (!events[eventName].length) { //修正沒有事件直接刪除空數組
delete events[eventName];
}
}
}
return this;
}
function trigger(event) {
var events = this.events,
i, args, falg;
if (!events || event in events === false) return;
args = slice.call(arguments, 1);
for (i = events[event].length - 1; i >= 0; i--) {
falg = events[event][i].apply(this, args);
}
return falg; //修正帶返回
}
return function() {
this.on =
this.subscribe = bind;
this.off =
this.unsubscribe = unbind;
this.trigger =
this.publish = trigger;
this.one = one;
return this;
};
})([].slice);
function pageA(callback) {
//模擬執行時間
setTimeout(function() {
callback()
}, 2000)
}
function pageB (callback) {
//模擬執行時間
setTimeout(function() {
callback()
}, 1000)
}
function pageC(callback) {
}
*{
margin: 0;
padding: 0;
}
/*body{
width: 100%;
height: 100%;
}*/
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
.container .page-a {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
position: absolute;
z-index: 5;
}
.container .page-b {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
position: absolute;
z-index: 4;
}
.page-c {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
position: absolute;
z-index: 3;
}
/**
* 頁面切換
* 鏡頭方法
*/
.effect-out{
-webkit-animation: effectOut 8s ease-in-out forwards;
-webkit-transform-origin:71% 72%;
-moz-animation: effectOut 8s ease-in-out forwards;
-moz-transform-origin:71% 72%;
}
@-webkit-keyframes effectOut{
0% { opacity:1; }
100% { -webkit-transform: scale(20); opacity:0; }
}
@-moz-keyframes effectOut{
0% { opacity:1; }
100% { -moz-transform: scale(20); opacity:0; }
}
.effect-in{
z-index: 15;
display: block;
opacity:0;
-webkit-transform: scale(8);
-webkit-animation: effectIn 5s ease-in-out forwards;
-webkit-transform-origin:58.5% 73.5%;
-moz-transform: scale(8);
-moz-animation: effectIn 5s ease-in-out forwards;
-moz-transform-origin:58.5% 73.5%;
}
@-webkit-keyframes effectIn{
100% { -webkit-transform: scale(1); opacity:1; }
}
@-moz-keyframes effectIn{
100% { -moz-transform: scale(1); opacity:1; }
}
