first commit

book/changelog.txt

@@ -0,0 +1,139 @@
+Turn.js
+www.turnjs.com
+
+------------------------------------------------------
+Turn.js 4.1.0 - 2012/11/65
+------------------------------------------------------
+
++ Added support to the Android's default browser
++ Fixed the hard page effect in IE9
++ Fixed issue #220
+
+------------------------------------------------------
+Turn.js 4.0.9 - 2012/08/03
+------------------------------------------------------
+
++ Fixed issue when using the .own-size class
++ Event zoom.change now is preventable
+
+------------------------------------------------------
+Turn.js 4.0.8 - 2012/07/16
+------------------------------------------------------
+
++ Added option direction
++ Added method direction
++ Added property direction
+
+------------------------------------------------------
+Turn.js 4.0.7 - 2012/07/12
+------------------------------------------------------
+
++ Fixed a issue of the pages method
++ Fixed issue #112
++ corner argument of the start event now returns null when using the methods next, previous and page
++ Fixed issue of certain samples in IE8
+
+------------------------------------------------------
+Turn.js 4.0.6 - 2012/07/10
+------------------------------------------------------
+
++ Fixed a issue of the peel method when using the single display
++ Fixed issue of using all the corners in single display mode
++ Added method version
++ Added option turnCorner
+
+------------------------------------------------------
+Turn.js 4.0.5 - 2012/06/16
+------------------------------------------------------
+
++ Fixed some visualization issues of the zoom viewport
+
+------------------------------------------------------
+Turn.js 4.0.4 - 2012/06/16
+------------------------------------------------------
+
++ Fixed a problem of the method page and event start
+
+------------------------------------------------------
+Turn.js 4.0.3 - 2012/06/16
+------------------------------------------------------
+
++ Fixed minor issues of HTML4 version
+
+------------------------------------------------------
+Turn.js 4.0.2 - 2012/06/16
+------------------------------------------------------
+
++ New Zoom viewport
++ New magazine sample
+
+------------------------------------------------------
+Turn.js 4.0.1 - 2012/06/12
+------------------------------------------------------
+
++ Fixed some issues when calculating z-index of pages
++ Added method peel
+
+------------------------------------------------------
+Release 4 Commercial - 2012/06/07
+------------------------------------------------------
+
++ Added option autoCenter
++ Added option zoom
++ Added property animating
++ Added property zoom
++ Added method center
++ Added method destroy
++ Added method is
++ Added method zoom
++ Added event missing
++ Added event zooming
++ Added class .even
++ Added class .fixed
++ Added class .hard
++ Added class .odd
++ Added class .own-size
++ Added class .sheet
++ Added class .sheet
++ Added the ignore attribute
++ New turn.html4.js
++ New scissors.js
++ Changed the class .turn-page to .page
++ Improved the animation frame generator with requestAnimationFrame
++ Improved the animation speed for hard pages with CSS3 transitions
++ Redesigned the event sequence to listen to only three events
++ Fixed issue #79
++ Fixed issue #91
++ Fixed issue about the event order turning
++ turned
++ Fixed issue about appending pages in wrong locations
+
+------------------------------------------------------
+Release 3 - 2012/03/01
+------------------------------------------------------
+
++ Added 'range'
++ Added 'addPage'
++ Added 'removePage'
++ Added 'hasPage'
++ Added 'pages'
++ Added 'display'
++ Added 'when' to the initial configuration
++ Added 'pages' to the initial configuration
++ Added 'inclination' to the initial configuration
++ Added 'first' event
++ Added 'last' event
++ Added gradients for non-webkit browsers
+
+------------------------------------------------------
+Release 2 - 2012/02/15
+------------------------------------------------------
+
++ Added 'size'.
++ Bug in Chrome 17-18 Beta about losing background-image was fixed.
+
+------------------------------------------------------
+Release 1 - 2012/02/05
+------------------------------------------------------
++ First alpha release 
+

book/core/bigBook/css/docs.css

@@ -0,0 +1,443 @@
+/* Docs sample */
+html,body{
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+}
+
+body{
+	background: url('../pics/bg.jpg') ;
+	background-repeat: no-repeat;
+	background-size: 120% 120%;
+	margin:0;
+	padding:0;
+	overflow: hidden;
+}
+
+#canvas{
+	width: 960px;
+	height: 600px;
+	margin: 100px auto;
+}
+
+.logo {
+	width: 10vw;
+	height: 3vw;
+	background: url('../pics/logo.png') center center no-repeat;
+	background-size: 100% 100%;
+	position: fixed;
+	right:2vw;
+	top:2vw;
+}
+
+#book-zoom{
+	-webkit-transition: -webkit-transform 1s;
+	-moz-transition: -moz-transform 1s;
+	-ms-transition: -ms-transform 1s;
+	-o-transition: -o-transform 1s;
+	transition: transform 1s;
+}
+
+.animated{
+	-webkit-transition:margin-left 0.2s ease-in-out;
+	-moz-transition:margin-left 0.2s ease-in-out;
+	-o-transition:margin-left 0.2s ease-in-out;
+	-ms-transition:margin-left 0.2s ease-in-out;
+	transition:margin-left 0.2s ease-in-out;
+}
+
+.sample-docs{
+	margin-top:20px;
+	width:942px;
+	/* height:600px; */
+	height:35vw;
+}
+
+.sample-docs .page{
+	width:471px;
+	height:600px;
+	background:white;
+
+	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
+	box-shadow:0 0 20px rgba(0,0,0,0.2);
+}
+
+/* .sample-docs .hard{
+	background-image:url(../pics/covers.jpg);
+} */
+
+.sample-docs .p2{
+	background-position:-471px 0;
+}
+
+.sample-docs .p28{
+	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
+	background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
+	background-image:linear-gradient(left, #fff 95%, #dadada 100%);
+}
+
+/* .sample-docs .p189{
+	background-position:-942px 0;
+}
+
+.sample-docs .p190{
+	background-position:-1413px 0;
+} */
+
+.sample-docs .even .gradient{
+	position:absolute;
+	top:0;
+	left:2px;
+	width:100%;
+	height:100%;
+	background-image:url(../pics/right-border.png);
+	background-position:right top;
+	background-repeat: repeat-y;
+	/* background-repeat: no-repeat; */
+	background-size: auto 100%;
+}
+
+.sample-docs .odd .gradient{
+	position:absolute;
+	top:0;
+	left:-4px;
+	width:100%;
+	height:100%;
+	background-image:url(../pics/left-border.png);
+	background-position:left top;
+	background-repeat: repeat-y;
+	/* background-repeat: no-repeat; */
+	background-size: auto 100%;
+}
+
+.sample-docs .page-wrapper{
+	-webkit-perspective:2000px;
+	-moz-perspective: 2000px;
+	-ms-perspective: 2000px;
+	perspective: 2000px;
+}
+
+
+.sample-docs .loader{
+	background-image:url(../pics/loader.gif);
+	width:22px;
+	height:22px;
+	position:absolute;
+	top:280px;
+	left:219px;
+}
+
+.sample-docs .shadow{
+	-webkit-transition: -webkit-box-shadow 0.5s;
+	-moz-transition: -moz-box-shadow 0.5s;
+	-o-transition: -webkit-box-shadow 0.5s;
+	-ms-transition: -ms-box-shadow 0.5s;
+
+	-webkit-box-shadow:0 0 20px #ccc;
+	-moz-box-shadow:0 0 20px #ccc;
+	-o-box-shadow:0 0 20px #ccc;
+	-ms-box-shadow:0 0 20px #ccc;
+	box-shadow:0 0 20px #ccc;
+}
+
+.sample-docs .tabs{
+	width:942px;
+	height:22px;
+	top:-22px;
+	position:relative;
+	z-index:1;
+}
+
+.sample-docs .tabs > div{
+	width:461px;
+	height:22px;
+	float:left;
+}
+
+.sample-docs .tabs .left{
+	text-align:left;
+	margin-left:10px;
+}
+
+
+.sample-docs .tabs .right{
+	text-align:right;
+	margin-right:10px;
+}
+
+.sample-docs .tabs a{
+	color:black;
+	-webkit-border-image: url(../pics/tab-off.png) 5 20 5 20 repeat stretch;
+	border-width: 5px 20px 5px 20px;
+	display:inline-block;
+	font:bold 11px arial;
+	text-shadow:1px 1px 0 #ddd;
+	color:#333;
+	line-height:12px;
+	text-decoration:none;
+}
+
+.sample-docs .tabs .on,
+.sample-docs .tabs .on:hover{
+	-webkit-border-image: url(../pics/tab-on.png) 5 20 5 20 repeat stretch;
+	cursor:default;
+}
+
+.sample-docs .tabs a:hover{
+	color:black;
+	text-decoration: none;
+	cursor:pointer;
+	-webkit-border-image: url(../pics/tab-hover.png) 5 20 5 20 repeat stretch;
+
+}
+
+/* 修改进度条样式 */
+
+.progress-bar {
+	position: relative;
+}
+.progress-bar .left-des {
+	position:absolute;top:0;left:0
+}
+.progress-bar .right-des {
+	position: absolute;top:0;right:0
+}
+.progress-bar .left-des .pcTxt {
+	font-size: 16px;font-family: Microsoft YaHei;font-weight: bold;color: #DFB057;line-height: 30px;display:inline-block;
+}
+.progress-bar .right-des .pcTxt {
+	font-size: 16px;font-family: Microsoft YaHei;font-weight: bold;color: #DFB057;line-height: 30px;display:inline-block;
+}
+.progress-bar .right-des .pcTxt .txt {
+	color:#FFFFFF;
+}
+
+.turnjs-slider {
+	width: 960px;
+	padding:50px 0;
+	background:rgba(0,0,0, 0);
+}
+.turnjs-slider .ui-slider-horizontal {
+	width: 960px;
+	background: #DFB057;
+	border-radius:5px;
+	/* 单独处理进度条 和 圆  层级问题 */
+	z-index: 0;
+}
+.turnjs-slider .ui-slider-horizontal {
+	margin:0;
+}
+.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+	margin-top: -9px;
+	margin-left: -11px;
+}
+.turnjs-slider .ui-slider-handle {
+	width: 15px;
+	height: 15px;
+	opacity: 1;
+	border-radius: 50%;
+	background: #A00D11;
+	border: 6px solid #DFB057;
+	z-index:9999;
+}
+
+
+
+
+/*******************************************************************************手机端***************************************************************************************************/
+
+@media screen and (max-width: 1024px) {
+	body{
+		background: url('../pics/mobile-bg.png');
+		background-size: 100% 100%;
+		margin:0;
+		padding:0;
+		overflow:hidden;
+		width: 100%;
+		height: 100%;
+	}
+	.logo {
+		width: 35vw;
+		height: 10vw;
+		background: url('../pics/mobile-logo.png') center center no-repeat;
+		background-size: 100% 100%;
+		position: fixed;
+		left:50%;
+		margin-left: -17.5vw;
+		top:5%;
+	}
+	#canvas{
+		width: 100%;
+		height: 100%;
+		
+	}
+	#wrapper {
+		width: 100%;
+		height: 70%;
+		margin: 100px auto;
+		margin-bottom:0;
+		overflow-y: scroll;
+	}
+	#book-zoom{
+		width: 100%;
+		height: 86%;
+	}
+	.sample-docs{
+		width: 80%!important;
+		text-align: center;
+		height: 100%;
+		/* height:400px; */
+		margin: 0 auto!important;
+	}
+	.sample-docs .page-wrapper {
+		height:100%;
+	}
+	.sample-docs .page-wrapper .page {
+		height:100%;
+	}
+	.sample-docs .page-wrapper .page img {
+		height: 100%;
+	}
+	.sample-docs .hard{
+		background: none;
+		/* background:url(../pics/bg.jpg) center center no-repeat; */
+		/* background-size: 100% 100%; */
+	}
+
+	
+	.progress-bar {
+		position: relative;
+		width: 80%;
+		margin:0 auto!important;
+		/* left: 4%; */
+		/* margin-top:10vw; */
+	}
+	.progress-bar .left-des {
+		position:absolute;
+		top:-20px;
+	}
+	.progress-bar .right-des {
+		position: absolute;
+		top:-20px;
+		right:0;
+	}
+	.progress-bar .left-des .pcTxt {
+		font-size: 12px;
+		font-family: Microsoft YaHei UI;
+		font-weight: 400;
+		line-height: 40px;
+		color: #DBA761;
+		opacity: 1;
+		/* transform: scale(0.9); */
+	}
+	.progress-bar .right-des .pcTxt {
+		font-size: 12px;
+		font-family: Microsoft YaHei UI;
+		font-weight: 400;
+		line-height: 40px;
+		color: #DBA761;
+		opacity: 1;
+		transform: scale(0.9);
+	}
+
+	/* 修改进度条样式 */
+
+	.turnjs-slider {
+		/* width: 72vw; */
+		width: 100%;
+		padding:25px 0;
+		background:rgba(0,0,0, 0);
+	}
+	.turnjs-slider .ui-slider-horizontal {
+		/* width: 72vw; */
+		width: 100%;
+		margin:0;
+		background: #DFB057;
+		height: 2vw;
+		border-radius:15px;
+	}
+	.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+		margin-left: -10px;
+	}
+	.turnjs-slider .ui-slider-handle {
+		width: 4vw;
+		height: 4vw;
+		opacity: 1;
+		border-radius: 50%;
+		background: #A00D11;
+		border: 6px solid #DFB057;
+		z-index:9999;
+	}
+}
+@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
+	#canvas{
+		margin: 200px auto;
+		overflow-y: auto;
+	}
+	.sample-docs {
+		width: 60%!important;
+	}
+	.progress-bar {
+		margin:40px auto!important;
+	}
+	.progress-bar .left-des .pcTxt ,.progress-bar .right-des .pcTxt {
+		font-size: 20px;
+	}
+	.turnjs-slider {
+		padding:70px 0;
+	}
+	.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+		margin-top:-14px;
+	}
+  }
+
+@media all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait) {
+	#canvas{
+		margin: 250px auto;
+		overflow-y: auto;
+	}
+	.sample-docs {
+		width: 60%!important;
+	}
+	.progress-bar {
+		margin:50px auto!important;
+	}
+	.progress-bar .left-des .pcTxt ,.progress-bar .right-des .pcTxt {
+		font-size: 30px;
+	}
+	.turnjs-slider {
+		padding:80px 0;
+	}
+	.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+		margin-top:-14px;
+	}
+}
+  /* 
+  @media all and (device-width: 320px) and (device-height: 568px) and (orientation:portrait) { 
+	#canvas{
+		margin: 80px auto;
+	}
+	.sample-docs {
+		height: 300px;
+	}
+	.progress-bar {
+		margin:20px auto!important;
+	}
+	.progress-bar .left-des .pcTxt ,.progress-bar .right-des .pcTxt {
+		font-size: 12px;
+	}
+	.turnjs-slider {
+		padding:50px 0;
+	}
+	.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+		margin-top:-10px;
+	}
+} */

book/core/bigBook/css/jquery.ui.css

@@ -0,0 +1,143 @@
+.turnjs-slider{
+	width:600px;
+	height:8px;
+	background:rgba(0,0,0, 0.2);
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-o-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slider .thumbnail{
+	width:115px;
+	height:85px;
+	position:absolute;
+	background:rgba(0,0,0, 0.5);
+	z-index:10000;
+	top:-100px;
+	left:-17px;
+	display:none;
+
+	-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-webkit-transition:all 0.2s;
+	-webkit-border-radius:5px;
+
+	-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-moz-transition:all 0.2s;
+	-moz-border-radius:5px;
+
+	-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-o-transition:all 0.2s;
+	-o-border-radius:5px;
+
+	-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-ms-transition:all 0.2s;
+	-ms-border-radius:5px;
+
+	transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	transition:all 0.2s;
+	border-radius:5px;
+}
+
+.no-transition{
+	-webkit-transition:none;
+	-moz-transition:none;
+	-o-transition:none;
+	-ms-transition:none;
+}
+
+.turnjs-slider .thumbnail div{
+	width:100px;
+	margin:7px;
+	height:70px;
+	background-color:white;
+}
+
+.turnjs-slider .ui-state-hover .thumbnail{
+	display:block;
+	opacity:0;
+}
+
+.turnjs-slider .ui-state-active .thumbnail{
+	display:block;
+	opacity:1;
+	-webkit-transform:scale(1, 1);
+	-moz-transform:scale(1, 1);
+	-o-transform:scale(1, 1);
+	-ms-transform:scale(1, 1);
+	transform:scale(1, 1);
+}
+
+/* Layout helpers
+----------------------------------*/
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.turnjs-slider .ui-widget-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.turnjs-slider .ui-slider {
+	position: relative;
+	text-align: left;
+}
+
+.turnjs-slider .ui-slider-handle{
+	position: absolute;
+	z-index:0;
+	width:80px;
+	height: 8px;
+	cursor: default;
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+}
+
+.turnjs-slider .ui-slider-horizontal {
+	height: 8px;
+	width:520px;
+	margin-left:39px;
+}
+
+.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
+	margin-left:-40px;
+	margin-top:-1px;
+}
+
+/* Interaction states
+----------------------------------*/
+.turnjs-slider .ui-slider-handle{
+	border:1px solid white;
+	background-color:black;
+	opacity:0.2;
+	display:block;
+	-webkit-transition:opacity 0.2s;
+	-moz-transition:opacity 0.2s;
+	-ms-transition:opacity 0.2s;
+	-o-transition:opacity 0.2s;
+	transition:opacity 0.2s;
+}
+
+.turnjs-slider .ui-state-hover{
+	opacity:0.4;
+}
+
+.turnjs-slider .ui-state-active{
+	opacity:1;
+}
+

book/core/bigBook/css/jquery.ui.html4.css

@@ -0,0 +1,16 @@
+.turnjs-slide{
+	width:600px;
+	height:8px;
+	background-color:#B4B4B4;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.turnjs-slide .ui-slider .ui-slider-handle{
+	background-color:#8F8F8F;
+	z-index:10000;
+}
+
+.turnjs-slide .thumbnail{
+	background: #666;
+}

book/core/bigBook/index.html

@@ -0,0 +1,438 @@
+<!doctype html>
+<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
+<!--[if !IE]><!-->
+<html lang="en">
+<!--<![endif]-->
+
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
+	<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
+	<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
+	<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
+	<script type="text/javascript" src="../../lib/hash.js"></script>
+	<title>翻书</title>
+</head>
+
+<body>
+
+	<div id="canvas">
+		<div class="logo"></div>
+		<div id="wrapper">
+			<div id="book-zoom">
+				<div class="sample-docs">
+					<!-- <div ignore="1" class="tabs"><div class="left">  </div> <div class="right"> </div></div> -->
+					<!-- <div class="hard"></div> -->
+					<!-- <div class="hard"></div> -->
+					<!-- <div class="hard p190"></div> -->
+					<!-- <div class="hard p191"></div> -->
+				</div>
+			</div>
+			<div class="progress-bar">
+				<div class="left-des"></div>
+				<div class="right-des"></div>
+				<div id="slider-bar" class="turnjs-slider">
+					<div id="slider"></div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+
+
+	<script type="text/javascript">
+
+		function judgeIsMobile() {
+			return (/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|webOS|android/i.test(navigator.userAgent))
+		}
+		const isMobile = judgeIsMobile();
+		// console.log('isMobile',isMobile)
+
+		let leftDes = $('.left-des');
+		let rightDes = $('.right-des');
+		leftDes.html('<span class="pcTxt">首页</span>')
+		rightDes.html('<span class="pcTxt">1/<span class="txt">186<span></span>')
+		function loadApp() {
+
+			var flipbook = $('.sample-docs');
+
+			// Check if the CSS was already loaded
+
+			if (flipbook.width() == 0 || flipbook.height() == 0) {
+				setTimeout(loadApp, 10);
+				return;
+			}
+
+			// Mousewheel
+
+			// $('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {
+
+			// 	var data = $(this).data(),
+			// 		step = 190,
+			// 		flipbook = $('.sample-docs'),
+			// 		actualPos = $('#slider').slider('value')*step;
+
+			// 	if (typeof(data.scrollX)==='undefined') {
+			// 		data.scrollX = actualPos;
+			// 		data.scrollPage = flipbook.turn('page');
+			// 	}
+
+			// 	data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
+			// 		Math.max(0, data.scrollX + deltaX));
+
+			// 	var actualView = Math.round(data.scrollX/step),
+			// 		page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));
+
+			// 	if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
+			// 		data.scrollPage = page;
+			// 		flipbook.turn('page', page);
+			// 	}
+
+			// 	if (data.scrollTimer)
+			// 		clearInterval(data.scrollTimer);
+
+			// 	data.scrollTimer = setTimeout(function(){
+			// 		data.scrollX = undefined;
+			// 		data.scrollPage = undefined;
+			// 		data.scrollTimer = undefined;
+			// 	}, 1000);
+
+			// });
+
+			// Slider
+			// 滑动 
+			$("#slider").slider({
+				min: 1,
+				max: 187,
+
+				start: function (event, ui) {
+					if (!window._thumbPreview) {
+						_thumbPreview = $('<div />', { 'class': 'thumbnail' }).html('<div></div>');
+						setPreview(ui.value);
+						// _thumbPreview.appendTo($(ui.handle));
+					} else
+						setPreview(ui.value);
+					//控制进度条按钮
+					moveBar(false);
+				},
+
+				slide: function (event, ui) {
+					// console.log('slide',event, ui)
+					setPreview(ui.value);
+				},
+
+				stop: function () {
+					console.log('stop')
+					if (window._thumbPreview)
+						_thumbPreview.removeClass('show');
+					let turnPage = Math.max(1, $(this).slider('value') * 2 - 2)
+
+					$('.sample-docs').turn('page', turnPage);
+				}
+			});
+
+
+			// URIs
+
+			Hash.on('^page\/([0-9]*)$', {
+				//页面刷新时执行 普通切换不执行
+				yep: function (path, parts) {
+					// console.log('path',path)
+					// console.log('parts',parts)
+					var page = parts[1];
+					if (page !== undefined) {
+
+						if ($('.sample-docs').turn('is'))
+
+							$('.sample-docs').turn('page', page);
+					}
+
+				},
+				nop: function (path) {
+					// 这个是html后面不加啥后缀是执行
+					// console.log('这个是啥时候执行啊啊啊啊啊啊啊 啊 啊啊啊 啊啊啊')
+					// if(isMobile){
+					// 	console.log('这是移动端啊啊啊啊啊啊 啊啊啊啊啊啊啊啊')
+					// 	// Hash.go('page/' + 3).update();
+					// 	// $('.sample-docs').turn('page', 5);
+					// }
+					if ($('.sample-docs').turn('is'))
+						$('.sample-docs').turn('page', 1);
+				}
+			});
+
+			// Arrows
+
+			// $(document).keydown(function (e) {
+
+			// 	var previous = 37, next = 39;
+
+			// 	switch (e.keyCode) {
+			// 		case previous:
+
+			// 			$('.sample-docs').turn('previous');
+
+			// 			break;
+			// 		case next:
+
+			// 			$('.sample-docs').turn('next');
+
+			// 			break;
+			// 	}
+
+			// });
+
+			// Create the flipbook
+
+			flipbook.turn({
+				elevation: 50,
+				acceleration: isMobile ? true : false,
+				gradients: true,
+				autoCenter: true,
+				duration: 1000,
+				pages: isMobile ? 187 : 189,
+				display: isMobile ? 'single' : 'double',
+				when: {
+					turning: function (e, page, view) {
+
+						// 处理
+						console.log('page', page)
+						//pc端末页 不给翻页控制
+						var book = $(this),
+							currentPage = book.turn('page'),
+							pages = book.turn('pages');
+						// 处理当前页码数量  更新dom
+						if (isMobile) {
+							currentPage = window.location.href.split('/')[window.location.href.split('/').length - 1]
+							// console.log('currentPage---------------------', currentPage)
+						}
+						console.log('view[0]', view[0])
+						let curPage = view[0] - 2;
+						if (view[0] == 2 && !isMobile) {
+							curPage = 1;
+						}
+						if (view[0] == 0 && !isMobile) {
+							curPage = 1;
+						}
+						if (view[0] == 2 && isMobile) {
+							curPage = 1;
+						}
+						if (view[0] == 1 && isMobile) {
+							curPage = 1;
+						}
+						if (view[0] > 2 && isMobile) {
+							curPage = view[0] - 1;
+						}
+						let rightDesContent = `<span class="pcTxt">${curPage}/<span class="txt">${pages - (isMobile ? 1 : 3)}</span></span>`,
+							leftDesContent = "首页";
+						if (!isMobile) {
+							if (curPage == 1 && view[0] == 2) {
+								leftDesContent = "目录";
+							}
+							//在 curPage == 1之后单独处理pc首页情况
+							else if (curPage == 1 && view[0] == 0) {
+								leftDesContent = "首页";
+							}
+							else if (2 <= curPage && curPage <= 48) {
+								leftDesContent = "第一章  广东乡村状况与经济情形";
+							}
+							else if (50 <= curPage && curPage <= 126) {
+								leftDesContent = "第二章  广东农民运动概况";
+							}
+							else if (128 <= curPage && curPage <= 146) {
+								leftDesContent = "附录 广东第二次全省农民代表大会之经过";
+							}
+							else if (148 <= curPage && curPage <= 160) {
+								leftDesContent = "第二次农民代表大会后广东农运情形";
+							}
+							else if (162 <= curPage && curPage <= 186) {
+								leftDesContent = "中央第二次扩大会议对于广东农民运动议决案";
+							}
+							else {
+								leftDesContent = "首页"
+							}
+						} else {
+							if (1 == curPage - 1 && view[0] === 3) {
+								leftDesContent = "首页";
+							}
+							// 单独处理
+							else if (1 <= curPage - 1 && curPage - 1 <= 2 && view[0] === 4) {
+								leftDesContent = "目录";
+							}
+							// 单独处理
+							else if (1 <= curPage - 1 && curPage - 1 <= 2 && view[0] === 5) {
+								leftDesContent = "目录";
+							}
+							else if (3 <= curPage - 1 && curPage - 1 <= 50) {
+								leftDesContent = "第一章  广东乡村状况与经济情形";
+							}
+							else if (51 <= curPage - 1 && curPage - 1 <= 128) {
+								leftDesContent = "第二章  广东农民运动概况";
+							}
+							else if (129 <= curPage - 1 && curPage - 1 <= 147) {
+								leftDesContent = "附录 广东第二次全省农民代表大会之经过";
+							}
+							else if (148 <= curPage - 1 && curPage - 1 <= 161) {
+								leftDesContent = "第二次农民代表大会后广东农运情形";
+							}
+							else if (162 <= curPage - 1 && curPage - 1 <= 186) {
+								leftDesContent = "中央第二次扩大会议对于广东农民运动议决案";
+							}
+							else {
+								leftDesContent = "首页"
+							}
+						}
+
+						leftDesContent = `<span class="pcTxt">${leftDesContent}</span>`
+						rightDes.html(rightDesContent)
+						leftDes.html(leftDesContent)
+						console.log('page123456789978', page)
+						if (currentPage > 3 && currentPage < pages - 3) {
+							if (page == 1) {
+								book.turn('page', 2).turn('stop').turn('page', page);
+								e.preventDefault();
+								return;
+							} else if (page == pages) {
+								book.turn('page', pages - 1).turn('stop').turn('page', page);
+								e.preventDefault();
+								return;
+							}
+							else {
+								console.log('来到这边')
+							}
+						}
+						else if (page > 3 && page < pages - 3) {
+							console.log('应该是这边')
+							if (currentPage == 1) {
+								book.turn('page', 2).turn('stop').turn('page', page);
+								e.preventDefault();
+								return;
+							} else if (currentPage == pages) {
+								book.turn('page', pages - 1).turn('stop').turn('page', page);
+								e.preventDefault();
+								return;
+							}
+						}
+
+						console.log('走到history hash了')
+						Hash.go('page/' + page).update();
+
+						// 正好跳页的是时候 将首页的边框隐藏掉
+						if (!isMobile) {
+							let targetArr = window.location.href && window.location.href.split('/').length > 0 && window.location.href.split('/') || []
+							let target = targetArr[targetArr.length - 1]
+							if (target == 1) {
+								$('.sample-docs .odd .gradient').css("display", "none");
+							} else {
+								$('.sample-docs .odd .gradient').css("display", "block");
+							}
+						}
+
+						//切换条
+						if (page == 1 || page == pages)
+							$('.sample-docs .tabs').hide();
+
+					},
+
+					turned: function (e, page, view) {
+						// 正好跳页的是时候 将首页的边框隐藏掉
+						if (!isMobile) {
+							let targetArr = window.location.href && window.location.href.split('/').length > 0 && window.location.href.split('/') || []
+							let target = targetArr[targetArr.length - 1]
+							if (target == 1) {
+								$('.sample-docs .odd .gradient').css("display", "none");
+							} else {
+								$('.sample-docs .odd .gradient').css("display", "block");
+							}
+						}
+						console.log(111111111111111111111)
+						var book = $(this);
+						$('#slider').slider('value', getViewNumber(book, page));
+						if (isMobile && view[0] > 3) {
+							console.log('我是移动端哈哈哈哈')
+						}
+						// $('.sample-docs').turn('page', page);
+						//切换条
+						if (page != 1 && page != book.turn('pages'))
+							$('.sample-docs .tabs').fadeIn(500);
+						else
+							$('.sample-docs .tabs').hide();
+
+						book.turn('center');
+						updateTabs();
+
+					},
+
+					start: function (e, pageObj) {
+
+						//控制进度条按钮
+						moveBar(true);
+
+					},
+
+					end: function (e, pageObj) {
+						// console.log('刷新的那一刻end')
+						var book = $(this);
+
+						setTimeout(function () {
+							$('#slider').slider('value', getViewNumber(book));
+						}, 1);
+						//控制进度条按钮
+						moveBar(false);
+
+					},
+
+					missing: function (e, pages) {
+
+						// console.log('刷新的那一刻missing')
+						// console.log('e',e)
+						// console.log('pages',pages)
+						// if(isMobile){
+						// 	let href = window.location.href;
+						// 	let hrefArr = href.split('/');
+						// 	let targetArr = [Number(hrefArr[hrefArr.length-1]),Number(hrefArr[hrefArr.length-1])+1,Number(hrefArr[hrefArr.length-1])+2]
+						// 	console.log('targetArr',targetArr)
+						// 	pages = [...pages,...targetArr]
+						// 	console.log('pages',pages)
+						// }
+						for (var i = 0; i < pages.length; i++) {
+							addPage(pages[i], $(this));
+						}
+
+					}
+				}
+			}).turn('page');
+
+
+			$('#slider').slider('option', 'max', numberOfViews(flipbook));
+
+			flipbook.addClass('animated');
+
+
+			// Show canvas
+
+			$('#canvas').css({ visibility: 'visible' });
+		}
+
+		// Hide canvas
+
+		$('#canvas').css({ visibility: 'hidden' });
+
+		yepnope({
+			test: Modernizr.csstransforms,
+			yep: ['../../lib/turn.min.js', 'css/jquery.ui.css'],
+			nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css'],
+			both: ['css/docs.css', 'js/docs.js'],
+			complete: loadApp
+		});
+
+	</script>
+
+</body>
+
+</html>

book/core/bigBook/js/docs.js

@@ -0,0 +1,120 @@
+/* Documentation sample */
+function judgeIsMobile() {
+    return (/phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone|webOS|android/i.test(navigator.userAgent))
+}
+
+function loadPage(page) {
+	var img = $('<img />');
+	img.load(function() {
+		var container = $('.sample-docs .p'+page);
+		img.css({width: container.width(), height: container.height()});
+		img.appendTo($('.sample-docs .p'+page));
+		container.find('.loader').remove();
+	});
+	//处理移动端
+	console.log('page',page)
+	if(this.judgeIsMobile()) {
+			img.attr('src', 'mobile-pages/' +  `1 (${page-1})` + '.jpg');
+			return;
+	}
+	img.attr('src', 'pages/' +  `1 (${page-2})` + '.jpg');
+
+}
+
+function addPage(page, book) {
+
+	var id, pages = book.turn('pages');
+
+	var element = $('<div />', {});
+	if (book.turn('addPage', element, page)) {
+		
+		if (page<191) {
+			element.html('<div class="gradient"></div><div class="loader"></div>');
+			loadPage(page);
+		}
+	}
+}
+
+// 控制书上方按钮---暂时无用
+function updateTabs() {
+	
+	var tabs = {7: 'Clases', 12:'Constructor', 14:'Properties', 16:'Methods', 23:'Events'},
+		left = [],
+		right = [],
+		book = $('.sample-docs'),
+		actualPage = book.turn('page'),
+		view = book.turn('view');
+
+	for (var page in tabs) {
+		var isHere = $.inArray(parseInt(page, 10), view)!=-1;
+
+		if (page>actualPage && !isHere)
+			right.push('<a href="#page/' + page + '">' + tabs[page] + '</a>');
+		else if (isHere) {
+			
+			if (page%2===0)
+				left.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>');
+			else
+				right.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>');
+		} else
+			left.push('<a href="#page/' + page + '">' + tabs[page] + '</a>');
+
+	}
+	$('.sample-docs .tabs .left').html(left.join(''));
+	$('.sample-docs .tabs .right').html(right.join(''));
+
+}
+
+// 总数/2-1 控制进度条
+function numberOfViews(book) {
+	return book.turn('pages') / 2 + 1;
+}
+
+// 当前page/2-1 控制进度条
+function getViewNumber(book, page) {
+	return parseInt((page || book.turn('page'))/2 + 1, 10);
+}
+
+//进度条按钮层级
+function moveBar(yes) {
+	if (Modernizr && Modernizr.csstransforms) {
+		$('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
+	}
+}
+//拖动滚动条显示的小图
+function setPreview(view) {
+	var previewWidth = 115,
+		previewHeight = 73,
+		previewSrc = 'pics/preview.jpg',
+		preview = $(_thumbPreview.children(':first')),
+		numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
+		width = (numPages==1) ? previewWidth/2 : previewWidth;
+
+	_thumbPreview.
+		addClass('no-transition').
+		css({width: width + 15,
+			height: previewHeight + 15,
+			top: -previewHeight - 30,
+			left: ($($('#slider').children(':first')).width() - width - 15)/2
+		});
+
+	preview.css({
+		width: width,
+		height: previewHeight
+	});
+
+	if (preview.css('background-image')==='' ||
+		preview.css('background-image')=='none') {
+
+		preview.css({backgroundImage: 'url(' + previewSrc + ')'});
+
+		setTimeout(function(){
+			_thumbPreview.removeClass('no-transition');
+		}, 0);
+
+	}
+
+	preview.css({backgroundPosition:
+		'0px -'+((view-1)*previewHeight)+'px'
+	});
+}