<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕課七夕主題</title>
<link rel='stylesheet' href='style.css' />
<link rel='stylesheet' href='pageA.css' />
<link rel='stylesheet' href='pageB.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>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="BoyWalk.js"></script>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<!-- 第一副畫面 -->
<li>
<!-- 背景 -->
<div class="a_background">
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</div>
<!-- 云 -->
<div class="cloudArea">
<div class="cloud"></div>
<div class="cloud"></div>
</div>
<!-- 太陽 -->
<div id="sun"></div>
</li>
<!-- 第二副畫面 -->
<li>
<!-- 背景圖 -->
<div class="b_background"></div>
<div class="b_background_preload"></div>
<!-- 商店 -->
<div class="shop">
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
<!-- 燈 -->
<div class="lamp"></div>
</div>
</li>
<li> 頁面3 </li>
</ul>
<div class="button">
<button>開門亮燈</button>
<button>關門燈滅</button>
</div>
</div>
</body>
<script type="text/javascript">
$(function() {
var container = $("#content");
var swipe = Swipe(container);
// 頁面滾動到指定的位置
function scrollTo(time, proportionX) {
var distX = container.width() * proportionX;
swipe.scrollTo(distX, time);
}
////////////////////////////////////////////////////////
// ================= 動畫處理 ======================= //
////////////////////////////////////////////////////////
// 用來臨時調整頁面
swipe.scrollTo(container.width(), 0);
function doorAction(left, right, time) {
var $door = $('.door');
var doorLeft = $('.door-left');
var doorRight = $('.door-right');
var defer = $.Deferred();
var count = 2;
// 等待開門完成
var complete = function() {
if (count == 1) {
defer.resolve();
return;
}
count--;
}
doorLeft.transition({
'left': left
}, time, complete);
doorRight.transition({
'left': right
}, time, complete);
return defer;
}
// 開門
function openDoor() {
return doorAction('-50%', '100%', 2000);
}
// 關門
function shutDoor() {
return doorAction('0%', '50%', 2000);
}
///////////
// 燈動畫 //
///////////
var lamp = {
elem: $('.b_background'),
bright: function() {
this.elem.addClass('lamp-bright')
},
dark: function() {
this.elem.removeClass('lamp-bright')
}
};
// 開門
$("button:first").click(function() {
// 開門
openDoor().then(function() {
// 開燈
lamp.bright();
});
});
// 關門
$("button:last").click(function() {
// 關門
shutDoor().then(function() {
// 燈滅
// ？
});
});
})
</script>
</html>
/////////
//頁面滑動 //
/////////
/**
* [Swipe description]
* @param {[type]} container [頁面容器節點]
* @param {[type]} options [參數]
*/
function Swipe(container) {
// 獲取第一個子節點
var element = container.find(":first");
var swipe = {};
// li頁面數量
var slides = element.find("li");
// 獲取容器尺寸
var width = container.width();
var height = container.height();
// 設置li頁面總寬度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
})
// 設置每一個頁面li的寬度
$.each(slides, function(index) {
var slide = slides.eq(index); // 獲取到每一個li元素
slide.css({
width: width + 'px',
height: height + 'px'
});
});
// 監控完成與移動
swipe.scrollTo = function(x, speed) {
// 執行動畫移動
element.css({
'transition-timing-function' : 'linear',
'transition-duration' : speed + 'ms',
'transform' : 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
}
return swipe;
}
* {
padding: 0;
margin: 0;
}
ol,
ul,
li {
list-style-type: none;
}
/*主體部分*/
#content {
width: 100%;
height: 100%;
/* top: 20%; */
overflow: hidden;
position: absolute;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
background: #CAE1FF;
color: red;
float: left;
overflow: hidden;
position: relative;
}
li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
a {
position: absolute;
top: 50%;
left: 40%;
}
.charector {
position: absolute;
left: 0%;
top: 55%;
position: absolute;
width: 100%;
height: 100%;
width: 151px;
height: 291px;
background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
}
.slowWalk {
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
}
/*普通慢走*/
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
/*背景圖*/
.a_background {
width: 100%;
height: 100%;
/* background-image: url("../images/QixiA.png");
background-size: 100% 100%;*/
position: absolute;
}
.a_background_top {
width: 100%;
height: 71.6%;
background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
background-size: 100% 100%;
}
.a_background_middle {
width: 100%;
height: 13.1%;
background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
background-size: 100% 100%;
}
.a_background_botton {
width: 100%;
height: 15.3%;
background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
background-size: 100% 100%;
}
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
/*人物暫停*/
.pauseWalk {
animation-play-state: paused;
}
/*-------- 太陽自轉以及動畫 --------*/
#sun {
background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
position: absolute;
z-index: 1;
top: -30px;
height: 201px;
width: 201px;
right: 40%;
}
.rotation {
-webkit-animation-name: rotation;
-webkit-animation-duration: 30s;
-webkit-animation-iteration: 1;
-moz-animation-name: rotation;
-moz-animation-duration: 30s;
-moz-animation-iteration: 1;
}
@-webkit-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}
@-moz-keyframes rotation {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
}
/*天空云*/
.cloud {
z-index: 2;
position: absolute;
}
.cloud1 {
width: 20%;
height: 30%;
left: -5%;
top: 15%;
background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
-webkit-animation-name: smallCloud;
-webkit-animation-duration: 30s;
-webkit-animation-iteration: infinite;
-moz-animation-name: smallCloud;
-moz-animation-duration: 30s;
-moz-animation-iteration: infinite
}
.cloud2 {
width: 20%;
height: 30%;
right: -5%;
background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
-webkit-animation-name: largeCloud;
-webkit-animation-duration: 60s;
-webkit-animation-iteration: infinite;
-moz-animation-name: largeCloud;
-moz-animation-duration: 60s;
-moz-animation-iteration: infinite;
}
@-webkit-keyframes smallCloud {
0% {
left: -5%;
}
100% {
left: 100%;
}
}
@-moz-keyframes smallCloud {
0% {
left: -5%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes largeCloud {
0% {
right: -5%;
}
100% {
right: 100%;
}
}
@-moz-keyframes largeCloud {
0% {
right: -5%;
}
100% {
right: 100%;
}
}
/*背景圖*/
.b_background {
width: 100%;
height: 100%;
background-image: url("http://img1.sycdn.imooc.com//55ade06f00015a0d14410901.png");
background-size: 100% 100%;
position: absolute;
}
.b_background_preload {
background: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png") no-repeat -9999px -9999px;
}
.lamp-bright {
background-image: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png");
}
/*商店*/
.shop {
width: 39.5%;
height: 35.5%;
position: absolute;
left: 29%;
top: 36.5%;
}
.door {
position: absolute;
width: 32%;
height: 100%;
top: 32%;
height: 68%;
overflow: hidden;
left: 58.5%;
}
.door-left,
.door-right {
width: 50%;
height: 100%;
position: absolute;
}
.door-left {
left: 0%;
background: url(http://img1.sycdn.imooc.com//55ade1140001050d00910231.png);
background-size: 100% 100%;
}
.door-right {
left: 50%;
background: url(http://img1.sycdn.imooc.com//55ade12100019f5b00910231.png);
background-size: 100% 100%;
}
