<!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="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 src="carousel.js"></script>
<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="cat"></figure>
<!-- 小女孩 -->
<figure class="girl"></figure>
<!-- 圣誕男孩 -->
<figure class="christmas-boy-head"></figure>
<figure class="christmas-boy boy-walk"> </figure>
<!-- 旋轉木馬 -->
<div id="carousel">
<figure id="spinner"></figure>
</div>
</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() {
Christmas();
})
/**
* 第二副場景頁面
*
*/
function pageB(element, pageComplete) {
//3d旋轉節點
var $carousel = element.find("#carousel");
//旋轉木馬對象
var carousel = new Carousel($carousel, {
imgUrls: [
"http://img1.sycdn.imooc.com//5662e29a0001905a14410901.png",
"http://img1.sycdn.imooc.com//5662e2960001f16314410901.png",
"http://img1.sycdn.imooc.com//5662e26f00010dea14410901.png"
]
});
var i = 0;
$("button").on("click", function() {
// ?
})
}
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bg-adaptive {
background-size: 100% 100%;
}
.container .page-b {
width : 100%;
height : 100%;
background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
position: absolute;
z-index: 40;
}
//================================================
//格式化字符串
var slice = Array.prototype.slice
function toArray(a, i, j) {
return slice.call(a, i || 0, j || a.length);
}
/**
* 返回true,如果傳遞的值不是未定義。
* @param {Mixed}
* @return {Boolean}
*/
function isDefined(v) {
return typeof v !== 'undefined';
}
/**
* 拷貝對象，跳過已存在的
* @param {[type]} o [接受方對象]
* @param {[type]} c [源對象]
* @return {[type]} [description]
*/
function applyIf(o, c) {
if (o) {
for (var p in c) {
//跳過已存在
if (!isDefined(o[p])) {
o[p] = c[p];
}
}
}
return o;
}
/**
* @class String
* 格式化字符串
*/
applyIf(String, {
format: function(format) {
var args = toArray(arguments, 1);
return format.replace(/\{(\d+)\}/g, function(m, i) {
return args[i];
});
}
});
/**
* 3d旋轉木馬
* @param {[type]} argument [description]
* @return {[type]} [description]
*/
function Carousel(carousel, options) {
//圖片
var imgUrls = options.imgUrls;
//場景元素
var $carousel = carousel;
//容器元素
var $spinner = carousel.find("#spinner");
var angle = 0;
//圖片數
var numpics = imgUrls.length;
//角度
var rotate = 360 / numpics;
var start = 0;
var current = 1;
//子元素
var $contentElements;
//圖片數量
this.numpics = numpics;
/**
* 創建結構
* @param {[type]} imgUrl [description]
* @return {[type]} [description]
*/
function createStr(imgUrl) {
var str = '<figure style="transform:rotateY({0}deg) translateZ({1}) scaleY(.9);position:absolute;">'
+ '<img src="{2}" style="width:100%;height:100%;">'
+ '</figure>';
return String.format(str,
start,
"2.5rem",
imgUrl
)
}
/**
* 初始化樣式
* @return {[type]} [description]
*/
function initStyle() {
//場景元素
$carousel.css({
// "transform": "scale(0.3)",
"-webkit-perspective": "500",
"-moz-perspective": "500px",
"position": "absolute",
"left": "6.8rem",
"top": "4.5rem"
});
//容器
$spinner.css({
"width": "4rem",
"transform-style": "preserve-3d"
})
}
/**
* 繪制頁面節點
* @return {[type]} [description]
*/
function render() {
//創建內容
var contentStr = '';
$.each(imgUrls, function(index, url) {
contentStr += createStr(url);
start = start + rotate;
})
$contentElements = $(contentStr);
$spinner.append($contentElements)
}
//樣式
initStyle();
//繪制節點
render();
//旋轉次數,游標,當前頁碼
var currIndex;
/**
* 運行旋轉
* @param {[type]} count [description]
* @param {Function} callback [description]
* @return {[type]} [description]
*/
this.run = function(count, callback) {
currIndex = count;
//360
//480
//600
angle = (count - 1) * rotate + 360
$spinner
.css({
"transform": "rotateY(-" + angle + "deg)",
"transition":"1s"
})
.css({
"-moz-transform": "rotateY(-" + angle + "deg)",
"-moz-transition":"1s"
})
.one("transitionend webkitTransitionend", function() {
//去掉transition保留在樣式上
//照成的縮放元素會有動畫變化
$spinner.css("transition","")
$spinner.css("-moz-transition","")
alert("旋轉完成")
})
}
}
