这篇文章主要介绍“如何使用JQuery的turn.js库来实现翻书效果”，在日常操作中，相信很多人在如何使用JQuery的turn.js库来实现翻书效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用JQuery的turn.js库来实现翻书效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
实现效果如下
官方示例代码：
html:
<div id = “ flipbook” > <div class = “ hard” > Turn.js </ div> <div class = “ hard” > </ div> <div> 第1页 </ div> <div> 第2页 < / div> <div> 第3页 </ div> <div> 第4页 </ div> <div class = “ hard” > </ div> <div class = “ hard” > </ div> </ div>
js:
-
第一步：记得要先引入JQ文件（1.3或更高版本才可以哦~~）
-
第二步：引入turn.js文件，可以到官网下载
-
第三步：接下来就可以用咱们的主角turn.js啦~~代码如下↓↓↓
<script type = “ text / javascript” >
$（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
</ script>
注：class为hard的可理解为一本书的（首末）封皮
-
特征
✓适用于iPad和iPhone。
✓简单，美观且功能强大的API。
✓允许通过Ajax请求动态加载页面。
✓纯HTML5 / CSS3内容。
✓两个过渡效果。
✓可在带有turn.html4.js的IE 8等旧浏览器中使用
-
要求
jQuery 1.3或更高版本。
浏览器支持
Safari 5镀铬16Firefox 10IE 10、9、8
设备
✓所有iOS（iPad，iPhone，iPod）
✓安卓（Chrome for Android）
-
改进措施
Turn.js 4在其核心上进行了一系列重要的性能改进。
✓现在，在浏览器平台上效果更加流畅。
✓无论页面大小如何，新的DOM组成都保证了相同的性能。
-
补体
turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新缩放功能，请参阅示例。
剪刀.js-为turn.js分为两部分。
hash.js-使用pushState和URI散列控制导航历史记录。
-
API文档
turn.js API方便地构建为jQuery的UI插件，它提供对一组功能的访问，并允许您定义用户交互。
完整的文档可在此处获得，也可以PDF格式获得。
Options
-
acceleration 加速
-
autoCenter 自动居中
-
direction 方向
-
display 显示
-
duration 持续时间
-
gradients 渐变
-
height 高度
-
elevation
-
page 页
-
pages 页数
-
turnCorners
-
when 执行函数
-
width 宽度
-
zoom 放大缩小
Properties
-
animating 动画
-
direction 方向
-
display 显示
-
disabled 禁用
-
page 页
-
pages 页数
-
size 大小
-
options
-
view 视图
-
zoom 放大缩小
Methods 方法
-
addPage
-
center
-
destroy
-
direction
-
display
-
disable
-
hasPage
-
next
-
is
-
page
-
pages
-
peel
-
previous
-
range
-
removePage
-
resize
-
size
-
stop
-
version
-
zoom
Events 事件
-
end
-
first
-
last
-
missing
-
start
-
turning
-
turned
-
zooming
CSS Classes class类
-
.even
-
.fixed
-
.hard
-
.odd
-
.own-size
-
.page
-
.p[0-9]+
-
.shadow
-
.sheet
附录demo 代码
demo && 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#flipbook div {
text-align: center;
line-height: 500px;
}
.backward,
.forward{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<!-- 官方示例代码 -->
<!-- <div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"> </div>
<div> 第1页 </div>
<div> 第2页 </div>
<div> 第3页 </div>
<div> 第4页 </div>
<div class="hard"> </div>
<div class="hard"> </div>
</div> -->
<div id="flipbook">
<div style="background: pink;" class="hard"> </div>
<div style="background: olivedrab;" class="hard"> </div>
<div style="background: palegoldenrod;"> Page 1 </div>
<div style="background: paleturquoise;"> Page 2 </div>
<div style="background: plum;"> Page 3 </div>
<div style="background: mediumaquamarine;"> Page 4 </div>
<div style="background: greenyellow;"> Page 5 </div>
<div style="background: darkkhaki;"> Page 6 </div>
<div style="background: aqua;" class="hard"> </div>
<div style="background: teal;" class="hard"> </div>
</div>
<!-- 前一页 -->
<img src="img/backward.png" class="backward" onclick="backwardPage()">
<!-- 后一页 -->
<img src="img/forward.png" class="forward" onclick="forwarPage()">
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<script>
$("#flipbook").turn({
width: 600,
height: 500,
// acceleration: true, // 是否加速，对于触摸屏的设备，这个值必须为true
// autoCenter: true, // 是否居中 默认值false
// direction: "ltr", // 翻书方向，值为rtl / ltr（3种写法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)
});
function backwardPage() {
$("#flipbook").turn("previous");
}
function forwarPage() {
$("#flipbook").turn("next");
}
</script>
</html>
demo如下：
按钮图片：
到此，关于“如何使用JQuery的turn.js库来实现翻书效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云搜网网站，小编会继续努力为大家带来更多实用的文章！
