<!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 type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
<link rel="stylesheet" type="text/css" href="pageA.css">
<script src="pageA.js"></script>
<script src="christmas.js"></script>
</head>
<body>
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
<!-- 男孩 -->
<div class="chs-boy chs-boy-deer"></div>
<!-- 窗戶 -->
<div class="window wood">
<div class="window-bg"></div>
<div class="window-content">
<div class="window-left"></div>
<div class="window-right"></div>
</div>
</div>
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
</section>
</section>
<button>點擊開窗戶</button>
<script type="text/javascript">
//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"
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>
/**
* 慕課網特制
* 圣誕主題效果
* @type {Object}
*/
/**
* 中間調用
*/
var Christmas = function() {
//頁面容器元素
var $pageA = $(".page-a");
//構建第一個場景頁面對象
new pageA($pageA);
};
$(function() {
//圣誕主題效果，開始
$("button").on("click",function(){Christmas()})
})
/**
* 第一副場景頁面
* @param {[type]} argument [description]
* @return {[type]} [description]
*/
function pageA(element) {
//根元素
this.$root = element;
//小男孩
this.$boy = element.find(".chs-boy");
//窗戶
this.$window = element.find(".window");
this.$leftWin = this.$window.find(".window-left")
this.$rightWin = this.$window.find(".window-right")
//運行動畫
this.run();
}
/**
* 開窗
* @return {[type]} [description]
*/
pageA.prototype.openWindow = function(callback) {
var count = 1;
var complete = function() {
++count
if (count === 2) {
callback && callback();
}
}
var bind = function(data) {
data.one("transitionend webkitTransitionEnd", function(event) {
data.removeClass("window-transition")
complete()
})
}
bind(this.$leftWin.addClass("window-transition").addClass("hover"))
bind(this.$rightWin.addClass("window-transition").addClass("hover"))
}
/**
* 運行下一個動畫
* @return {Function} [description]
*/
pageA.prototype.next = function(options) {
var dfd = $.Deferred();
this.$boy.transition(options.style, options.time, "linear", function() {
dfd.resolve()
});
return dfd;
}
/**
* 停止走路
* @return {[type]} [description]
*/
pageA.prototype.stopWalk = function() {
this.$boy.removeClass("chs-boy-deer")
}
/**
* 路徑
* @return {[type]} [description]
*/
pageA.prototype.run = function(callback) {
var that = this;
var next = function() {
return this.next.apply(this, arguments)
}.bind(this)
next({})
.then(function() {
// that.stopWalk();
that.openWindow(function() {
alert("窗戶已打開")
});
})
}
*{
margin: 0;
padding: 0;
}
.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;
}
/**
* 窗戶
*/
.window {
width: 2.6rem;
height: 1.5rem;
position: absolute;
left: 9.7rem;
top: 6.2rem;
cursor: pointer;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
.window-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
width: 91%;
margin: 0 auto;
height: 100%;
overflow: hidden;
}
/**
* 窗戶背景
*/
.window-bg {
width: 86%;
height: 92%;
position: absolute;
left: 50%;
margin-left: -43%;
bottom: 0;
background: url(http://img1.sycdn.imooc.com//565d07770001790814410901.png);
background-size: 100% 100%;
z-index: -1;
}
/**
* 窗戶底邊
* @type {[type]}
*/
.window:before {
content: "";
background: url(http://img1.sycdn.imooc.com//565d07e40001088402410017.png);
width: 100%;
height: 0.17rem;
display: block;
position: absolute;
bottom: 0.05rem;
background-size: 100% 100%;
z-index: 100;
}
/**
* 底邊陰影
* @type {[type]}
*/
.window:after {
content: "";
background: url(http://img1.sycdn.imooc.com//565d080400018d2702270009.png);
width: 100%;
height: 0.09rem;
display: block;
position: absolute;
bottom: 0;
background-size: 100% 100%;
z-index: 100;
}
.wood {
display: block;
overflow: hidden;
}
/**
* 左側門
*/
.window-left {
float: left;
background: url(http://img1.sycdn.imooc.com//565d081d0001cfd901140134.png);
-webkit-border-top-left-radius: 0.1rem;
-moz-border-top-left-radius: 0.1rem;
}
/**
* 右側門
*/
.window-right {
float: right;
background: url(http://img1.sycdn.imooc.com//565d084c0001431b01140134.png);
-webkit-border-top-right-radius: 0.1rem;
-moz-border-top-left-radius: 0.1rem;
}
.window-left,
.window-right {
width: 1.17rem;
height: 1.3rem;
z-index: 110;
box-shadow: 0 0 0.15rem #FCF0BC;
background-size: 100% 100%;
}
.window-animation {
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
}
/**
* 動畫過程
*/
.window-transition {
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
}
.window-left.hover {
/**?**/
}
.window-right.hover {
/**?**/
}
