简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  A brief analysis of how to use JQuery’s turn.js library to achieve the book-turning effect

A brief analysis of how to use JQuery’s turn.js library to achieve the book-turning effect

青灯夜游
青灯夜游forward
2022-09-07 10:56:452206browse

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!

A brief analysis of how to use JQuery’s turn.js library to achieve the book-turning effect

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

  • Features

✓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

  • Requires

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)

  • Improvements

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.

  • Complement

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.

  • API Documentation

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

  • ##removePage

  • resize

  • size

  • stop

    • ##version

    • zoom

Events Events

##end

  • first

  • last

  • missing

  • start

  • turning

  • turned

  • zooming

  • ##CSS Classes class 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视频教程、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!

Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：jQuery releases new version 3.6.1, check out the improvements!Next article：jQuery releases new version 3.6.1, check out the improvements!

Related articles

See more