JQuery plug-in that helps you generate page turning effects-bookblock

　　

Today we will introduce a beautiful jQuery paging effect plug-in-bookblock, which can be used to create dynamic slides similar to book paging effects. Hope you like it!

This plug-in depends on jQuery ++. This class library is a jQuery extension class library and its swipe event is used here.

HTML code

The main html code is as follows:

<Div id = "bb-bookblock" class = "bb-bookblock"> <div class = "bb-item"> <a href = "http://www.gbin1.com"> </a> </div> <div class =" bb-item "> <a href =" http://www.gbin1.com "> </a> </div> <div class = "bb-item"> <a href =" http://www.gbin1.com "> </a> </div> <div class =" bb-item "> <a href = "http://www.gbin1.com"> </a> </div> <div class = "bb- item "> <a href =" http://www.gbin1.com "> </a> </div> <div class = "bb-item"> <a href = "http://www.gbin1.com"> </a> </div> </div>

 

Java SDK code

$ (Function () {var Page = (function () {var config = {$ bookBlock: $ ('# bb-bookblock'), $ navNext: $ ('# bb-nav-next'), $ navPrev: $ (' # bb-nav-prev'), $ navJump: $ ('# bb-nav-jump'), bb: $ ('# bb-bookblock '). bookblock ({speed: 800, shadowSides: 0.8, shadowFlip: 0.7})}, init = function () {initEvents () ;}, initEvents = function () {var $ slides = config. $ bookBlock. children (), totalSlides = $ slides. length; // add navigation events config. $ navNext. on ('click', function () {config. bb. next (); return false;}); config. $ navPrev. on ('click', function () {config. bb. prev (); return false;}); config. $ navJump. on ('click', function () {config. bb. jump (totalSlides); return false ;}); // add swipe events $ slides. on ({'swipeleft ': function (event) {config. bb. next (); return false ;}, 'swiperight ': function (event) {config. bb. prev (); return false ;}}) ;}; return {init: init };}) (); Page. init ();});

Main Parameters

The main parameters are as follows:

// Speed for the flip transition in ms.

Velocity: 1000,

// Easing for the flip transition.

Easing: 'memory-in-out ',

// If set to true, both the flipping page and the sides will have an overlay to simulate shadows

Shadows: true,

// Opacity value for the "shadow" on both sides (when the flipping page is over it ).

/Value: 0.1-1

ShadowSides: 0.2,

// Opacity value for the "shadow" on the flipping page (while it is flipping ).

/Value: 0.1-1

ShadowFlip: 0.1,

// Perspective value

Perspective: 1300,

// If we shocould show the first item after reaching the end.

Circular: false,

// If we want to specify a selector that triggers the next () function. example: '# bb-nav-next '.

NextEl :'',

// If we want to specify a selector that triggers the prev () function.

PrevEl :'',

// Callback after the flip transition.

// Page is the current item's index.

// IsLimit is true if the current page is the last one (or the first one ).

OnEndFlip: function (page, isLimit) {return false ;},

// Callback before the flip transition.

// Page is the current item's index.

OnBeforeFlip: function (page) {return false ;}

I hope you will like this plug-in. If you have any questions, please leave us a message. Thank you!

Source: jQuery plug-in that helps you generate page turning effects-bookblock