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

<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>

 

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;
}

HTML

<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>