关于翻书插件turn.js的运用

今天给大家介绍一款好用的翻书插件，turn.js，它依赖于jQuery，话不多说，先上代码：

	//这里先引入两个外部cdn文件，方便打开查看效果：
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">script>
	<script type="text/javascript" src="https://cdn.bootcss.com/turn.js/3/turn.min.js">script>
然后添加简单的样式；
	<style type="text/css">
		body {
			background: #ccc;
		}

		#book {
			width: 800px;
			height: 500px;
		}

		#book .turn-page {
			background-color: white;
		}

		#book .cover {
			background: #333;
		}

		#book .cover h1 {
			color: white;
			text-align: center;
			font-size: 50px;
			line-height: 500px;
			margin: 0px;
		}

		#book .loader {
			background-image: url(loader.gif);
			width: 24px;
			height: 24px;
			display: block;
			position: absolute;
			top: 238px;
			left: 188px;
		}

		#book .data {
			text-align: center;
			font-size: 40px;
			color: #999;
			line-height: 500px;
		}

		#controls {
			width: 800px;
			text-align: center;
			margin: 20px 0px;
			font: 30px arial;
		}

		#controls input,
		#controls label {
			font: 30px arial;
		}

		#book .odd {
			background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
			background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
			background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
			background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
		}

		#book .even {
			background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
			background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
			background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
			background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
		}
	style>
//接着是布局：
	<div id="book">
		<div class="cover">
			
		div>
	div>
	

	<div id="controls">
		<label for="page-number">Page:label> <input type="text" size="3" id="page-number"> of <span
			id="number-pages">span>
	div>


<script type="text/javascript">

		var numberOfPages = 100;

		function addPage(page, book) {
			if (!book.turn('hasPage', page)) {
				var element = $('
', { 'class': 'page ' + ((page % 2 == 0) ? 'odd' : 'even'), 'id': 'page-' + page }).html('');
				book.turn('addPage', element, page);
				setTimeout(function () {
					element.html('
Data for page ' + page + '
');
}, 10);
}
}
$(window).ready(function () {
$('#book').turn({
acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function (e, page, view) {
var range = $(this).turn('range', page);
for (page = range[0]; page < range[1]; page++)
addPage(page, $(this));
},
turned: function (e, page) {
$('#page-number').val(page);
}
}
});
$('#number-pages').html(numberOfPages);
$('#page-number').keydown(function (e) {
if (e.keyCode == 13)
$('#book').turn('page', $('#page-number').val());
});
});
$(window).bind('keydown', function (e) {
if (e.target && e.target.tagName.toLowerCase() != 'input')
if (e.keyCode == 37)
$('#book').turn('previous');
else if (e.keyCode == 39)
$('#book').turn('next');
});
script>
<script>
$("#book").on("touchstart", function (e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("#book").on("touchend", function (e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
//左右滑
if (X > 50) {
$('#book').turn('previous');
}
//右左滑
else if (X < -50) {
$('#book').turn('next');
}
});
script>

最后能实现的效果如下：这里展示的是第一页翻页的情况