jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect

How to achieve a cool book-turning effect? The following article will share with you a jQuery plug-in - Turn.js, and introduce how to use Turn.js to implement a mobile e-book page turning project. I hope it will be helpful to everyone!

Let’s take a look at the effect first:

About Turn.js

It is a lightweight (15kb) jQuery/html5 plug-in is used to create page turning effects similar to books and magazines, and supports touch screen devices. Turn.js supports hardware acceleration to make the page turning effect smoother. [Recommended learning: jQuery video tutorial, web front-end video]

Features:

• Applicable to iPad and iPhone.
• Simple, beautiful and powerful API.
• Allow dynamic loading of pages via Ajax requests.
• Pure HTML5/CSS3 content.
• Two transition effects.
• Suitable for older browsers such as IE 8 with turn.html4.js

Basic usage of turn.js

1 Introduce turn.js

Turn.js depends on jQuery. First, the script tag introduces jQuery, and turn.js. jQuery requires version 1.3 or higher.

turn.js can be downloaded from official website

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/turn.js"></script>

2 Create html and css

Create a container element and some representatives For the sub-element of the page number, set the appropriate width and height for it, and enter some content

<div id="flipbook">
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
    <div class="page"></div>
</div>

3 Basic usage

$('#flipbook').turn({
    acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
    pages: 11, // 页码总数
    elevation: 50, // 转换期间页面的高度
    width: 300, // 宽度 单位 px
    height: 800, // 高度 单位 px
    gradients: true, // 是否显示翻页阴影效果
    display: 'single', //设置单页还是双页
    when: {
	// 翻页前触发
	turning: function (e, page, view) {
	                    
	},
	// 翻页后触发
	turned: function (e, page) {
				
        }
    }
});

This way you can achieve the basic page turning effect

3.1 turn common configuration items

3.2 when common listening events

3.3 Turn common methods

##Project implementation

The project has 30 pages, and each page corresponds to a picture. It is too slow to build page by page. Use js to create

to encapsulate a function with the basic configuration of turn.js , realize your own page turning effect according to the API

Once you come in, call the creation function, build the page, determine whether the current browser environment supports the csstransforms feature, and support calling turn.js. The call is completed Then execute the turn.js basic configuration function

Expand

A brief introduction to the two js plug-ins used in the project

Modernizr.js

Traditional browsers will not be completely replaced at this time, making it difficult for you to embed the latest CSS3 or HTML5 features into your website.

Modernizr It was born to solve this problem. As an open source JavaScript library, Modernizr detects the browser's support for CSS3 or HTML5 functions.

yeponpe.js

yepnope.js is a js script that can selectively asynchronously load resource files based on input conditions. It can be used on the page Only the js/css required by the user is loaded.

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect. For more information, please follow other related articles on the PHP Chinese website!