James
/
books


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
							<!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="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>


	<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();

		let imgBili = 1064/1545

		// 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">6<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: 7,

				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)
					// console.log("turnPage",turnPage)
					// if (!isMobile && (turnPage == 190 || turnPage == 191)) {
					// 	turnPage = 188;
					// }
					// if (isMobile && turnPage == 190) {
					// 	turnPage = 189;
					// }
					// if (isMobile && turnPage <= 2) {
					// 	turnPage = 3;
					// }
					// console.log("修改后的turnPage",turnPage)
					$('.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 ? 7 : 9,
				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 {
								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 {
								leftDesContent = "首页"
							}
						}

						leftDesContent = `<span class="pcTxt">${leftDesContent}</span>`
						rightDes.html(rightDesContent)
						leftDes.html(leftDesContent)
						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");
							}
						}
						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) {
						console.log('刷新的那一刻start')
						//控制进度条按钮
						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>