<!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>
</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").click(function(){
//圣誕主題效果，開始
Christmas()
})
})
/**
* 第一副場景頁面
* @param {[type]} argument [description]
* @return {[type]} [description]
*/
function pageA (element) {
//根元素
this.$root = element;
//小男孩
this.$boy = element.find(".chs-boy");
//運行動畫
this.run();
}
/**
* 運行下一個動畫
* @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({
"time": 10000,
"style": {
"top": "4rem",
"right": "16rem",
"scale": "1.2"
}
})
.then(function() {
return next({
"time":500,
"style": {
"rotateY" : "-180",
"scale": "1.5"
}
})
})
//?
.then(function(){
that.stopWalk();
})
}
*{
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;
}
/**
* 圣誕男孩
*/
.chs-boy {
width : 5rem;
height : 1.5rem;
position : absolute;
z-index : 3;
top : .1rem;
right : -3rem;
transform : scale(0.1);
background : url(http://img1.sycdn.imooc.com//565d07490001365329660269.png) -300% -100%;
background-size : 400% 100%;
}
/**
* 男孩走路動作
*/
.chs-boy-deer {
-webkit-animation:chsBoyDeer 0.75s steps(3,end) infinite;
-moz-animation:chsBoyDeer 0.75s steps(3,end) infinite;
}
@-webkit-keyframes chsBoyDeer {
0% {
background-position: -0% 100%;
}
100% {
background-position: -300% 100%;
}
}
@-moz-keyframes chsBoyDeer {
0% {
background-position: -0% 100%;
}
100% {
background-position: -300% 100%;
}
}
/**
* 人物停止
*/
.boy-stop-animate {
-webkit-animation-play-state: paused;
}
