一、什么是Turn.js
Turn.js是一款JavaScript库，可用于创建现实世界中杂志或册子的3D翻页效果。它支持多种功能，包括自动翻页、响应式布局、缩略图、键盘和鼠标控制等。这个库允许你为你的Web应用程序添加光鲜亮丽的动态页面，让用户能够享受更加交互式的内容浏览体验。
下面是一个最基本的使用示例：
<!DOCTYPE html>
<html>
<head>
<title>Turn.js Example</title>
<!-- 引入Turn.js库 -->
<script src="turn.min.js"></script>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="magazine">
<div class="turn-page" data-placeholder="Page 1"></div>
<div class="turn-page" data-placeholder="Page 2"></div>
<div class="turn-page" data-placeholder="Page 3"></div>
<div class="turn-page" data-placeholder="Page 4"></div>
</div>
<script>
$('.magazine').turn();
</script>
</body>
</html>
在上述示例中，我们将一个名为'magazine'的DIV元素标记为翻页容器，包含四个名为turn-page的子DIV。'data-placeholder'属性代表了翻页内容的替换文本，而每个翻页内容将在用户进行页面翻转时动态加载。 .turn()方法初始化Turn.js，启用翻页效果。
二、如何实现自动翻页
Turn.js允许你为页面设置自动翻页。要启用自动翻页，你可以使用“auto”选项，它指定页面在多长时间后自动翻转到下一页。以下是如何设置自动翻页的示例代码:
$('.magazine').turn({
//设置每5秒自动翻页
auto: 5000
});
三、缩略图
Turn.js中内置了缩略图功能，这使得用户可以轻松浏览包含大量页面的杂志或册子。以下示例代码演示了如何添加缩略图:
$('.magazine').turn({
//将缩略图添加到页面上
display: 'double',
acceleration: true,
gradients: true,
elevation:50,
when: {
turned: function(e, page) {
// 更新缩略图当前显示的页面
$('#slider').slider('value', page);
}
}
});
四、鼠标和键盘控制
Turn.js允许你使用键盘或鼠标来控制页面，方便用户的操作。以下是支持键盘和鼠标的示例代码:
$('.magazine').turn({
//启用键盘和鼠标控制
keyboard: true,
mouse: true,
//设置辅助工具提示
tooltips: {
//设置左右翻页的快捷键为←和→
next: 'Press →',
//由于HTML实体化，这里需要用←表示左箭头
prev: 'Press ←'
}
});
五、组合使用Turn.js和其他库
Turn.js可以与其他JavaScript库相结合，从而增强其功能。
例如，Turn.js可以与jQuery UI库相结合，从而使 Turn.js 具有拖动和缩放功能。以下示例代码演示了如何将 Turn.js 和 jQuery UI 库组合在一起:
<html>
<head>
<title>Turn.js Example</title>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="turn.min.js"></script>
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="magazine">
<div class="turn-page" data-placeholder="Page 1"></div>
<div class="turn-page" data-placeholder="Page 2"></div>
<div class="turn-page" data-placeholder="Page 3"></div>
<div class="turn-page" data-placeholder="Page 4"></div>
</div>
<script>
//初始化轮廓
$('.magazine').turn({
acceleration: true
});
//初始化缩放
$('.magazine-viewport').zoom({
flipbook: $('.magazine'),
max: function() {
return 2;
},
when: {
swipeLeft: function() {
$(this).zoom('flipbook').turn('next');
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous');
},
resize: function(event, scale, page, pageElement) {
if (scale==1)
loadSmallPage(page, pageElement);
else
loadLargePage(page, pageElement);
},
zoomIn: function () {
$('.thumbnails').hide();
$('.toolbar').hide();
$('.made').hide();
$('.flipbook-bg').css({'visibility': ''});
},
zoomOut: function () {
$('.thumbnails').fadeIn();
$('.toolbar').fadeIn();
$('.made').fadeIn();
$('.flipbook-bg').css({'visibility': 'hidden'});
}
}
});
</script>
</body>
</html>
在这个示例中，我们初始化了 Turn.js 轮廓、缩放和 jQuery UI 库。然后，我们将缩放器与轮廓绑定，启用缩放之后，通过缩放器的回调函数，我们可以动态地更新页面。
