<!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="pageB.css">
<script src="pageB.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">
<!-- 圣誕男孩 -->
<figure class="christmas-boy-head"></figure>
<figure class="christmas-boy boy-walk"> </figure>
</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 $pageB = $(".page-b");
//構建第二個場景頁面對象
new pageB($pageB);
};
$(function() {
$("button").on("click", function() {
//圣誕主題效果，開始
Christmas()
})
})
/**
* 第二副場景頁面
*
*/
function pageB(element, pageComplete) {
//圣誕男孩
var $boy = element.find(".christmas-boy");
var animationEnd = "animationend webkitAnimationEnd"
/**
* 小男孩動作
* @return {[type]} [description]
*/
var boyAction = {
//走路
walk: function() {
//?
},
//停止走路
stopWalk: function() {
$boy.removeClass("boy-walk");
$boy.addClass("boy-stand");
},
//繼續走路
runWalk: function() {
$boy.addClass("walk-run");
},
//解開包裹
unwrapp: function() {
var dfd = $.Deferred();
$boy.addClass("boy-unwrapp");
$boy.removeClass("boy-stand");
$boy.one(animationEnd, function() {
dfd.resolve();
})
return dfd;
},
//脫衣動作
//1-3
strip: function(count) {
$boy.addClass("boy-strip-" + count).removeClass("boy-unwrapp");
},
//人物用擁抱
//重疊問題處理
hug: function() {
$boy.addClass("boy-hug").one(animationEnd, function() {
$(".christmas-boy-head").show()
})
}
}
//開始走路
boyAction.walk()
.then(function() {
//停止走路
boyAction.stopWalk();
})
.then(function() {
//解開包裹
return boyAction.unwrapp();
})
.then(function() {
//脫衣動作
setTimeout(function(){
boyAction.strip(1)
},1000)
setTimeout(function(){
boyAction.strip(2)
},2000)
setTimeout(function(){
boyAction.strip(3)
},3000)
//任務重疊問題
setTimeout(function(){
boyAction.hug();
},4000)
})
}
.container .page-b {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
position: absolute;
z-index: 40;
}
/********************************************************
小男孩動作
**********************************************************/
.walk-stop {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.walk-run {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}
/**
* 圣誕小男孩
*/
.christmas-boy {
width: 3.5rem;
height: 4.06rem;
position: absolute;
z-index: 5;
right: -3.5rem;
top: 4rem;
background: url(http://img1.sycdn.imooc.com//565d09870001372152510407.png);
background-size: 1500% 100%;
background-position: 0% 100%;
}
/**
* 男孩走路動作
*/
.boy-walk {
-webkit-animation: boyWalk 0.75s steps(4, end) infinite;
-moz-animation: boyWalk 0.75s steps(4, end) infinite;
}
@-webkit-keyframes boyWalk {
0% {
background-position: 0 100%;
}
100% {
background-position: -400% 100%;
}
}
@-moz-keyframes boyWalk {
0% {
background-position: 0 100%;
}
100% {
background-position: -400% 100%;
}
}
/**
* 脫衣動作
*/
.boy-strip-1 {
background-position: -800% 100%;
}
.boy-strip-2 {
background-position: -900% 100%;
}
.boy-strip-3 {
background-position: -1000% 100%;
}
/**
* 站立動作
*/
.boy-stand {
background-position: -400% 100%;
}
/**
* 打開包裹
*/
.boy-unwrapp {
-webkit-animation: unwrapp 2s steps(2, end) 1 forwards;
-moz-animation: unwrapp 2s steps(2, end) 1 forwards;
}
@-webkit-keyframes unwrapp {
0% {
background-position: -400% 100%;
}
100% {
background-position: -600% 100%;
}
}
@-moz-keyframes unwrapp {
0% {
background-position: -400% 100%;
}
100% {
background-position: -600% 100%;
}
}
/**
* 男孩擁抱
*/
.boy-hug {
-webkit-animation: boyHug 1s steps(3, end) 1 forwards;
-moz-animation: boyHug 1s steps(3, end) 1 forwards;
}
@-webkit-keyframes boyHug {
0% {
background-position: -1000% 100%;
}
100% {
background-position: -1300% 100%;
}
}
@-moz-keyframes boyHug {
0% {
background-position: -1000% 100%;
}
100% {
background-position: -1300% 100%;
}
}
/**
* 男孩頭部
*/
.christmas-boy-head {
left: 7.85rem;
top: 4rem;
width: 3.5rem;
height: 4.06rem;
position: absolute;
z-index: 12;
background: url(http://img1.sycdn.imooc.com//565d09870001372152510407.png);
background-size: 1400% 100%;
background-position: -1300% 100%;
display: none;
}
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
