The album effect made by turnjs.

Turnjs is a library that simulates real page turning effects based on HTML5 and jQuery.

The page flip is outstanding and:

+ Hardware acceleration

+ Cross-platform support

+ Easy to use

+ The volume is only 15 kb.

 

:

Compressed: http://www.turnjs.com/turn.min.js

Full: https://github.com/blasten/turn.js

 

 

 

Instructions for use

Bytes ---------------------------------------------------------------------------------------------

Constructor:

$ ('Selector '). turn ([options]);

 

Options

Page (type: number, default: 1)

Shadows (type: boolean, default: true)

Duration (type: number, default: 600)

Acceleration (type: boolean, default: true)

 

Example: $ ('selector '). turn ({page: 1, acceleration: false });

 

 

 

Attribute:

 

Page: (returns the current Page)

Gets the current page.

Example: alert ($ ('selector '). turn ('page '));

View: (returns an array containing the current two page numbers. If not, the value is 0)

Gets the current view. A view is basically an array of two values, in which the key [0] is the left page and [1] the right page. cases where there is only one page, the value will be zero.

Example: alert ($ ('selector '). turn ('view '));

 

 

Method:

 

 

Page: (jump to the specified page number)

Example: $ ('selector '). turn ('page', 2 );

Next :( skip to next page)

Example: $ ('selector '). turn ('Next ');

Previous :( skip to the previous PAGE)

Example: $ ('selector '). turn ('previous ');

Stop: (stop the current page flip effect)

Example: $ ('selector '). turn ('Next'). turn ('stop ');

Resize :( Resets the size of all the wrappers used by turn) PS.

Example: $ ('selector '). turn ('resize ');

Disable: (disable all animation effects)

Example: $ ('selector '). turn ('disable', true );

 

Event:

 

 

Turning: (triggered when turning pages)

Example: $ ('selector '). bind ('turning', function (e, page) {console. log (page + 'says bye ...');});

Turned: (triggered after page turning)

Fired when a page has been turned.

Example: $ ('selector '). bind ('turne', function (e, page, pageObj) {alert ('page turned to' + Page );});

Start: (triggered when the page is displayed normally)

Example: $ ('selector '). bind ('start', function (e, turn) {console. log ('Is it turning? '+ Turn );});

End: (triggered when layers of the folding effect are hidden)

Example: $ ('selector '). bind ('end', function (e ){});

Bytes ---------------------------------------------------------------------------------------------

 

 

However, the functions of the turnjs homepage are not perfect.
So I wrote another small packet and added some features and effects.

The layout of html code has changed a bit,

For details, go to the address below.

Demo: http://maplejan.com/codelaboratory/code/html5/album

 

There are three methods in total:

Adddirenanav (): The add flip button.
AddShadow (): adds a shadow effect.
CheckPosition (): Check the book location and keep it centered.

 

 

The Methods www.2cto.com and trunjs are similar.

[Javascript]
$ ('# Pages'). turn ();
$ ('# Pages'). checkPosition (). adddirenanav (). addShadow ();
$ ('# Pages'). turn ();
$ ('# Pages'). checkPosition (). adddirenanav (). addShadow ();


Excerpt from jian sheng's code Memorandum