Logotipo tecnocodigo

Pagina Principal de Scripts
Volver

 



mini logotipo Diseño y Programación tecnocodigo

 

 

Publicidad 1
Boton Alta Articulo

Noticias del mes



Nueva Sección Visual Basic .NET

Diseño y Programación inaugura una nueva sección, un nuevo lenguaje de programación se suma a la larga lista de snippets. Visual Basic .NET. En el cuál se incluirán snippets de programación de PDA's (Pocket Pc's con Windows Mobile)..

 

boton negro

Mapa del Sitio. Sitemap

 Webstats4U - Web site estadísticas gratuito El contador para sitios web particulares

Logotipo tecnocodigo
Hay 5 visitantes activos

 

Buscador

HTML5/CSS3
Dhtml
JavaScript
VbScript
ASP
PHP
VB .NET
AJAX
Otros

ó
y


Cuadro Redondo

mini logotipo Diseño y Programación tecnocodigo

Zonas
Libro animado, con jQuery

Como crear un efecto de libro animado, PageTurner. Uno de los efectos más destacados en el mundo de la presentación de libros digitales, fotografías, proyectos y similares, es la simulación de pasar páginas de un libro.

Este efecto se puede conseguir con las librerías jQuery. Que podrá descargar en www.tecnocodigo.com/jquery.js ó bien en su página web oficial jquery.com.

Lo primero que debe hacer para crear su efecto libro animado (PageTurner) es añadir la libreria jQuery entre las etiquetas HEAD.

<script type="text/javascript" src="jquery.js"></script>

Después pondremos las lineas que crearan nuestro libro, al final detallaremos las variables que se podran configurar aunque son fácilmente identificables, aun estando en ingles.


script type="text/javascript">

// set constants
var $pageheight = 189; // our single page height
var $pagewidth = 146; // our single page width

var $pageYpos = 0; // current Y position of our bg-image (in both pages)

$(document).ready(function(){ // When the page is ready


/* left page turner */
$("#leftpage").click( function() {
$pageYpos = $pageYpos + $pageheight; // update Y postion
$("#leftpage").css("background-position", "0px "+$pageYpos+"px");// move the background position

setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);

}); // close leftpage click function

/* right page turner */
$("#rightpage").click( function() {
$pageYpos = $pageYpos - $pageheight; // note: minus page height
$("#rightpage")
.css("background-position", "0px "+$pageYpos+"px");

$("#flip").css("background-position", "top left");
setTimeout ('$("#flip").css("background-position", "top center");', 200);
setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);

}); // close rightpage click function
}); // close doc ready

</script>

Tendrá que crear el siguiente bloque CSS también en la sección HEAD, como todos los styles.

<STYLE type=text/css>
div#turner {
float:left;
padding-top:11px;
width:302px;
height:210px;
position:relative;
background: transparent url(/images/frame.jpg) 0px 6px no-repeat; /* this graphic gives us the book edges and the shadows around the edges */
}

#leftpage, #rightpage {
float:left;
position:relative;
background-image:url(images/10page.jpg);
overflow:hidden;
width:146px;
height:189px;
left:5px;
cursor:pointer
}
#leftpage{
background-position:0 0;
}
#rightpage{
background-position:146px 0
}
div#flip {
background: transparent url(images/3d.png) top center;
height:210px;
width:118px;
position:absolute;
top:0;
left:90px;
z-index:99;
margin-bottom:0;
padding-bottom:0
}
#js {
font-family:"Courier New", Courier, monospace;
font-size:small;
padding:2em;
clear:both
}
#js strong{
color:#003399
}
#js em{
color:#aaa
}
#js p.sc{
color:#c00;
font-weight:700;
margin:0;
padding:0
}
#js .function{
color:#090;
font-weight:700;
}
#js .css{
color:#900;
font-weight:700;
}
</STYLE>

Dentro de BODY tan sólo nos quedará añadir las capas donde se mostrarán los contenidos del libro.

<body>
<h2>Libro animado </h2>
<div id="turner">
<div style="background-position: center top;" id="flip"></div>
<div style="background-position: 146px -11151px;" id="leftpage"></div>
<div style="background-position: 0px -11151px;" id="rightpage"></div>
</div>
</body>

En la hoja de estilos podrá comprobar que vienen las imagenes jpg, que podrá sustituir pos sus páginas. Al principio de la hoja de estilos tambien viene definida la resolucion las paginas.

En la parte del script incluida en HEAD puede configurar el tamaño de las paginas para que estas se adecuen correctamente a la resolucion de las imagenes y del diseño de su web. Y pageYpos que será la página inicial que se mostrará.


Autor: AMC
Email o Web: webmaster@tecnocodigo.com
Fecha articulo: 2009-01-27

Top 5 JS

Boton Script Top 5 Reproducir sonido o musica al pulsar boton

14444 veces vista

Boton Script Top 5 Un breve código para desactivar la tecla de actualización F5.

12781 veces vista

Boton Script Top 5 Como crear un efecto de libro animado, PageTurner

12504 veces vista

Boton Script Top 5 Validar un email introducido en un formulario desde javascript.

11405 veces vista

Boton Script Top 5 Para insertar en tu pagina web un efecto de lluvia solo necesitas este fragmento de codigo.

11268 veces vista
 



InteBANNER
Fecha: 19/09/2017