实现效果如下
官方示例代码：
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
-
s较好
-
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库来实现翻书效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
文章标题：如何使用JQuery的turn.js库来实现翻书效果，发布者：亿速云，转载请注明出处：https://worktile.com/kb/p/23632
微信扫一扫 
支付宝扫一扫 
