Cmercio

Simple page flip effect using Jquery, css and simple html, very easy to implement just copy paste the code below
This is the javascript part enter it inside the … section of your website.
view sourceprint?
01.<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
02.<script type="text/javascript">
03.$(document).ready(function(){
04. 05.//Page Flip on hover
06.$("#flipthepage").hover(function() {
07.$("#flipthepage img , .msg_block").stop()
08..animate({
09.width: '307px',
10.height: '319px'
11.}, 500);
12.} , function() {
13.$("#flipthepage img").stop()
14..animate({
15.width: '50px',
16.height: '52px'
17.}, 220);
18.$(".msg_block").stop()
19..animate({
20.width: '50px',
21.height: '50px'
22.}, 200);
23.});24.});
25.</script>
Now add the required style
view sourceprint?
01.<style type="text/css">
02.img { behavior: url(iepngfix.htc) }
03.#flipthepage {
04.position: relative;
05.right: 0; top: 0;
06.float: right;
07.}
08.#flipthepage img {
09.width: 50px; height: 52px;
10.z-index: 99;
11.position: absolute;
12.right: 0; top: 0;
13.-ms-interpolation-mode: bicubic;
14.}15.#flipthepage .msg_block {
16.width: 50px; height: 50px;
17.overflow: hidden;
18.position: absolute;
19.right: 0; top: 0;
20.background: url(http://mistonline.in/wp/demo/subscribe.png) no-repeat right top;
21.}
22.</style>
Now last but not least our HTML part
view sourceprint?
1.<div id="flipthepage">
2.<a href="http://mistonline.in/wp"><imgsrc="http://mistonline.in/wp/demo/page_flip.png" alt="" /></a>
3.<div class="msg_block"></div>
4.</div>
-------------------------------------------------
DEMO
-------------------------------------------------

Parte I: El punto de partida

Hubo algunas decisiones que hice desde el principio en el proyecto:

    Yo quería que el producto final sea lo más flexible posible, para que yopudiera sumar o restar páginas y modificar el tamaño de las páginas sin tener que hacer grandes cambios en el código.
    Necesitaba todas las páginas de un libro individual (entre ocho y 16 páginas) que deben figurar en una sola imagen de gran tamaño, planos prestados (como éste). Esto significaba que yo podía garantizar que todas mis imágenes de la página se han descargado y "listo para el rock" ala primera señal de un clic.

    También significaba que podía superponer los elementos prestados en 3D de una vuelta de página en una capa separada, PNG reutilizables (como el que se muestra a continuación). Esta es, obviamente, la configuración de nuestra página de cabeza azul y el naranja y el pie, por lo que pueda necesitar para generar una versión de papel blanco para su uso en otroslibros.

    Viendo sólo el tercio central de la página nos da solamente la sombra de las curvas de la columna vertebral interior - ideal para añadir algo de profundidad en el libro se sienta libre. Cuando nuestro usuario intenta "pasar" una página hacia adelante o hacia atrás, podemos alinear la imagen de fondo ni a la derecha oa la izquierda de nuestro libro, respectivamente. Estos tres marcossimples recorrer un largo camino hacia la creación de la ilusión de una vuelta de página.

    El 3D repetir parte
    Yo quería basar mi solución en jQuery, debido a su fácil de aprender la sintaxis, el tamaño pequeño (20k), y la velocidad.

Parte II: La Estructura

La estructura de marcado que vamos a utilizar es una construcción de cuatro divs.

1. div # leftpage: la página de la izquierda2. div # rightpage: la página de la derecha
3. div # tirón: el punto medio entre las páginas
4. div # Turner: una envoltura para mantener todo unido

La estructura de la página de inflexión aparato

div # flip se establece como ‘position:absolute‘, por lo que puede flotar en el centro de nuestra región la columna vertebral.

Los otros tres divs se ajustan a position:relative, y...