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:
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/45ed5be70cb15f163efc4a995bcae042-0.gif)
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) { } } });
Copy after login
This way you can achieve the basic page turning effect![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/4179d82463459a5c29c59fe77917b4dd-1.png)
3.1 turn common configuration items
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/3845b3443249c18169b841ec01909b45-2.png)
3.2 when common listening events
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/fb5a1775f6af8bdabae62f23fc3f5e9d-3.png)
3.3 Turn common methods
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/6f9204804bb7ce3635301635630a41ce-4.png)
##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
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/dd1aee3157102b97ad04ebf8dbaa2190-5.png)
to encapsulate a function with the basic configuration of turn.js , realize your own page turning effect according to the API
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/a919b7ced6eee423c6c646208f23cf7e-6.png)
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
![jQuery plug-in sharing: Turn.js implements a mobile e-book page turning effect](https://img.php.cn/upload/article/000/000/024/a919b7ced6eee423c6c646208f23cf7e-7.png)
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.
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.
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!