This article will introduce you to the turn.js library of jQuery, and talk about using the turn.js library to achieve the book-turning effect. I hope it will be helpful to everyone!
Today I will share with you JQ’s turn.js. Let me first briefly introduce our protagonist turn.js today. [Related tutorial recommendations: jQuery Tutorial]
Turn.js is a JavaScript library that combines all the advantages of HTML5 and can make our content look like a book or magazine. It has a real flipping effect.
It uses HTML5 and CSS3 to perform effects, so it can work well on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices~
Turn.js has more features than Flash content Have all the advantages of real HTML content, except the feel of native content (optional content, no 3rd party context menus) and the ability to add ad code, HTML5 videos, tooltips, images, maps, forms, tracking every page And combine them with hundreds of neat libraries for the web.
***Keywords of this article: turn.js attribute value, usage, demo code (see appendix, at the end of the article~~).
The effect is as follows
Official sample code:
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:
Step 1: Remember to introduce the JQ file first (only version 1.3 or higher can be used) ~~)
Step 2: Introduce the turn.js file, which can be downloaded from the official website (official address: http://www.turnjs.com/)
Step 3: Next, you can use our protagonist turn.js~~The code is as follows↓↓↓
<script type = “ text / javascript” >
$（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;
</ script>Note: The class is hard and can be understood For the (first and last) cover of a book
✓Suitable for iPad and iPhone.
✓ Simple, beautiful and powerful API.
✓Allows dynamic loading of pages via Ajax requests.
✓Pure HTML5/CSS3 content.
✓Two transition effects.
✓ Works in older browsers like IE 8 with turn.html4.js
jQuery 1.3 or higher.
Browser Support
Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8
Devices
✓ All iOS (iPad, iPhone, iPod)
✓ Android (Chrome for Android)
Turn.js 4 has a series of important performance improvements at its core.
✓Now, the effect is smoother on browser platforms.
✓New DOM composition guarantees the same performance regardless of page size.
turn.html4.js - HTML4 version of turn.js.
zoom.js - New zoom functionality for turn.js, see examples.
Scissors.js - turn.js is divided into two parts.
hash.js - Control navigation history using pushState and URI hashes.
turn.js API is conveniently built as a UI plugin for jQuery, which provides access to a set of functionality and allows you to define user interactions.
The complete documentation is available here or in PDF format.
Options
acceleration acceleration
autoCenter automatic centering
direction direction
display display
duration duration
gradients gradient
height height
elevation
page page
pages Number of pages
turnCorners
when execute function
width width
zoom Zoom in and out
Properties
animating animation
direction direction
display display
disabled disabled
page Pages
pages Number of pages
size Size
options
view View
zoom Zoom in and out
Methods Method
addPage
center
destroy
direction
display
disable
hasPage
next
is
page
pages
peel
previous
range
##end
.even
.fixed
.page
.p[0-9]+
.shadow
.sheet
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视频教程、web前端视频】
The above is the detailed content of A brief analysis of how to use JQuery's turn.js library to achieve the book-turning effect. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
