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 ajQueryplug-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 fromofficial website

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

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

Expand

Modernizr.js

ModernizrIt 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.jsis 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.

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!