<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣誕主題</title>
<link rel='stylesheet' href='common.css' />
<link rel="stylesheet" type="text/css" href="pageC.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 src="pageC.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">
<!-- 窗戶關閉 -->
<div class="window wood">
<div class="window-content" data-attr="red">
<div class="window-scene-bg"></div>
<div class="window-close-bg"></div>
<div class="window-left hover"></div>
<div class="window-right hover"></div>
</div>
</div>
</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 $pageC = $(".page-c");
//構建第三個場景頁面對象
new pageC($pageC);
};
$(function() {
$("button").on("click",function(){
Christmas();
})
})
/**
* 第二副場景頁面
*
*/
function pageC() {
this.$window = $(".page-c .window");
this.$leftWin = this.$window.find(".window-left");
this.$rightWin = this.$window.find(".window-right");
this.$sceneBg = this.$window.find(".window-scene-bg");
this.$closeBg = this.$window.find(".window-close-bg");
// 背景切換
this.$sceneBg.transition({
opacity: 0,
}, 3000);
this.$closeBg.css("transform", "translateZ(0)")
this.$closeBg.transition({
opacity: 1
}, 5000);
//關門動作
this.closeWindow();
}
/**
* 關閉窗
* @return {[type]} [description]
*/
pageC.prototype.closeWindow = function() {
//?
}
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
.page-c {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
position: absolute;
z-index: 30;
}
/**
* 窗戶
*/
.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: 50%;
height: 1.3rem;
z-index: 110;
box-shadow: 0 0 0.15rem #FCF0BC;
background-size: 100% 100%;
}
.window-left.hover {
-webkit-transform: scale(0.95) rotateY(60deg) rotateZ(2deg);
-moz-transform: scale(0.95) rotateY(60deg) rotateZ(2deg);
margin-top: 0.1rem;
margin-left: -0.25rem;
}
.window-right.hover {
-webkit-transform: scale(0.95) rotateY(-60deg) rotateZ(-2deg);
-moz-transform: scale(0.95) rotateY(-60deg) rotateZ(-2deg);
margin-top: 0.1rem;
margin-right: -0.25rem;
}
/**
* 窗戶
*/
.page-c .window {
left: 8rem;
}
.window-left.close,
.window-right.close {
-webkit-animation: closeWindow 2s forwards;
-moz-animation: closeWindow 2s forwards;
}
@-webkit-keyframes closeWindow {
100% {
-webkit-transform: scale(1) rotateY(0deg) rotateZ(0deg);
margin-right: 0;
margin-left: 0;
}
}
@-moz-keyframes closeWindow {
100% {
-moz-transform: scale(1) rotateY(0deg) rotateZ(0deg);
margin-right: 0;
margin-left: 0;
}
}
/**
* 場景背景
* @type {[type]}
*/
.window-scene-bg {
background: url(http://img1.sycdn.imooc.com//565d0b4c0001816b02270135.png);
background-size: 100% 100%;
width: 2.26rem;
height: 1.2rem;
position: absolute;
left: 50%;
bottom: .1rem;
z-index: -1;
margin-left: -1.13rem;
-webkit-transform: translateZ(-50px);
-moz-transform: translateZ(-50px);
}
/**
* 關門背景
*/
.window-close-bg {
background: url(http://img1.sycdn.imooc.com//565d0b3d00016a4600810081.png);
background-size: 100% 100%;
width: 0.8rem;
height: 0.8rem;
position: absolute;
left: 50%;
bottom: .1rem;
margin-left: -0.4rem;
-webkit-transform: translateZ(-50px);
-moz-transform: translateZ(-50px);
opacity: 0;
z-index: 500;
}
