Biblioteca de flip de página de JavaScript de navegador cruzado-flip. js

Vista prévia

Descripción

Flip. js es una biblioteca de Flip-navegador y móvil-primera página de JavaScript que proporciona una manera creativa para mostrar los efectos de voltear libros (plegado de página) en el estilo plano.

Funcionamiento

Agregue el Flip-v 1.0.0. CSS en la sección head del documento.

<link rel="stylesheet" href="flip-v1.0.0.css">

Estructura HTML de marcado.

<div id="demo" class="flip-book">

<div>


<div style="background-image:url('images/1.jpg')" >



<div class="cover-text">




<h1>Heading</h1>




<h2>Sub heading</h2>



</div>


</div>


<div style="background-image:url('images/2.jpg')">


</div>


<div style="background-image:url('images/3.jpg')">


</div>


<div style="background-image:url('images/4.jpg')">


</div>

</div>
</div>

Cargue el Flip-v 1.0.0. js al final del documento.

<script src="flip-v1.0.0.js"></script>

Inicialización.

var sampleBookInit = function(){

flip.basic( 'demo' );
};

window.addEventListener( 'DOMContentLoaded', sampleBookInit, true );

Usos avanzados.

// Creates a flip book using the contents of the provided element.
 // Expects provided element to have a single child element that contains all the pages.
 // This is wrapper, and the easiest way to build a book. No need to look at the rest of the API if this works for you.
flip.basic(bookElement)

// Creates a flip book using the contents of the provided element.
 // Expects provided element to have a single child element that contains all the pages.
 // firstPage is an object created by flip.page.create().
flip.init(bookElement, firstPage)

// Creates a flip book using the contents of the provided element.
 // Expects provided element to have a single child element that contains all the pages.
flip.prime(nextPage)

// Returns the height of the page stack
flip.getStackHeight()

// Push a new page immediately onto the book, and transition it into view.
flip.push(page)

// Go back one page and pop the current page off the stack.
flip.pop()

// Close the book and return to the first page, removing all other pages from stack.
flip.close()

// Creates a page for the book with the provided content element.
 // The optional page event listener parameter expects an object with functions named the following (all optional):
/*
{

onObscure:


function(){},

onStay:



 function(){},

onShowComplete: function(index){}
}
*/
flip.page.create(pageContentElement, listener)